Automate deployment of NPM projects with teamcity

Teamcity is a continuous integration tool for jetbrains and can be set up with 20 build scripts for free, which is basically enough for us personally. Of course, if you exceed the limit later, consider using another well-known continuous integration tool, Jenkins. Of course I installed teamcity a long time ago, but I never had a chance to use it. These days just write a personal small project, use it to test the teamcity continuous integration function bar.

First of all, my condition, my teamcity is deployed on my own computer, on my own computer, of course, there are some other development software. In addition I have a server, installed Nginx and other software, and opened the FTP. All we have to do now is set up a continuous integration, and whenever I submit a Vue project, Teamcity automatically package the project and upload it to the FTP directory for the server to update the file. The process seems quite complicated, but it's quite simple. Server Configuration

I use the FTP software is VSFTPD, this is a more secure FTP server side, General Linux is used it. The disadvantage of this software is that when you log in, the FTP folder can only be the user home directory, can not be customized to modify the other directory. and nginx default file directory generally in/var/www/html or/usr/share/nginx/html or the like. Therefore nginx needs to modify the HTML file directory configuration to the user home directory.

Of course, the entire user's home directory is not exposed to the Web server, but only one subfolder is exposed. So the Nginx configuration file can be written like this.

    server {
        listen       default_server;
        Listen       [::]:80 default_server;
        server_name  _;
        Root         /home/yitian/html/my-website;
....

Of course, if this is configured, Access Nginx will only get 403 error. This question bothered me for a whole night. Finally found a solution. Linux software is very sensitive to permissions. If Nginx wants to access the folder under the user's home directory, all the files under that folder must be readable to all people, all subfolders under that folder must be open to everyone executable, and the user home directory must be readable for all people . So for me, I need to impose 701 and 755 permissions on both the user's home directory and the Web file directory, or you can set the household directory to 755 directly. Of course, I think the right to use the owner's directory is still a little bit better.

chmod 701/home/yitian
chmod 755-r/home/yitian/html/my-website

In addition, many people manage VPS like to use root account management, the advantage of doing this is that you do not need to enter the administrator password frequently. However, there may be security implications for always using the highest privileges, and the permissions for the various files and folders created with the root account are higher. I started using the My-website folder created by the root account and found that FTP was unable to transfer files to it because of insufficient permissions. After you create the folder again using a regular account, the FTP service can access the file normally.

Finally, if you pass in a folder that contains Chinese filenames, the server needs to set locale to Chinese (zh_cn. UTF-8), otherwise the Chinese file name will be displayed as??。 Operating systems such as Ubuntu may also need to install Chinese support. This question can be consulted on why my Linux server does not support Unicode. teamcity Configuration Create a project

My project is a Webpack-based NPM project built using Vue Scaffolding and uploaded to the Git repository. In the image below, fill in the information you need for your project. Once determined, Teamcity automatically pulls the project and attempts to build it. Of course, this attempt will fail in 90% cases and requires us to set up the build step manually. This is also the reason why the teamcity free version of the 20 build steps is limited.

To create a build step

This place is at the heart of this article, and when we understand the teamcity construction setup process, we are free to assemble more complex build processes.

Installing the NPM package

For a project, the first thing to do is to pull the dependency package and then try to compile the run. For my NPM project, Teamcity has no preset options, so you need to choose a command line type. Because the NPM package in the domestic visit is not very smooth, so when filling the command line, the use of Taobao image.

NPM Install--registry=https://registry.npm.taobao.org

In this step, I also filled out the NPM run build code directly in the custom script, but the results found that teamcity did not seem to be performing this line, so this can only be added as a separate build step. In addition, I was prepared to use Taobao Package CNPM command, but the results found that this command is not visible here, forced to use the words will only prompt to find the command, so can only use this compromise. Packaging Projects

Knowing the first step, the process of packaging a project is easy to understand.

Upload Dist Folder

This step is the most critical step in this continuous integration, which involves the FTP configuration of the server. But it's not too hard to do. First, the front of the FTP server needs to be configured well, servers and nginx should be set. Then set the FTP user name and password here. The most critical step here is the setup of path to sources. This is an arrow-delimited string, to the left is the folder to upload in the project, the right is the FTP server to upload the folder. You can also use the * and * * wildcard characters here. Detailed Configuration introduction You can click on the small question mark button below (not in the picture) to view official documents.

After the

setting is complete, click the Run button in the upper-right corner of the project to begin the build process. If all of the configuration is correct, wait a moment for the build to be successful, then access the server, you will find Nginx also normal display of the package after the project. So it's done. By the time the next project is developed and submitted, teamcity will automatically detect changes and execute the build and commit to the server. The process is completely automated, and all we have to do is wait a moment to see the real-time changes on the server.