To efficiently deploy pure front-end projects to cloud servers, several continuous integration deployment solutions have been studied, and here is a brief record and description.
Solution selection
There are two general deployment ideas:
- Compiled file deployment
The deployment of compiled files is to first package npm run build locally to generate a build folder, then transfer the build folder to the server, and then configure a static analysis with Nginx.
- Source code deployment
Source code deployment is to upload the source files to the server, and then execute npm install && npm run build. This way, the packaging work is handed over to the server, and the source code is just pushed locally. Git listens to the push and starts building automatically. This is a popular way now, and most continuous integration tools do it this way.
Regarding this project, I decided not to use other construction tools, but only use pure Git to monitor push and automatically build and start services.
Server
First prepare a server, I use a cloud server:
Host : 118.xxx.xxx.xxx
Project directory: /root/demo/my-project
Initialize a normal warehouse on the server
Log in to the server and create a normal warehouse in the /root/demo/my-project directory of the server
Execute command creation in the /root/demo/my-project directory:
git init my-project
After creation, the my-project folder will be generated, so our normal warehouse location is /root/demo/my-project
, remember that it will be used later.
Create a bare repository
Log in to the server and create a bare warehouse in the /root/demo directory of the server (what is a bare warehouse? A bare warehouse is a warehouse without a working directory. To put it bluntly, it is the .git folder in your project directory)
Execute command creation in the /root/demo directory:
git init --bare my-project.git
After creation, the my-project.git folder will be generated, so our bare warehouse location is /root/demo/my-project.git, remember that it will be used later.
Next, enter the my-project.git folder and find that there is a hooks folder inside, which is where the Git "hooks" are placed.
A "hook" is actually a shell file. Trigger execution when some git operations (such as: push, pull) are executed. Now we create a hook.
Add push hook
Create a new post-receive file in the hook directory. This hook file will be executed after the code is pushed to the bare warehouse. This is the most important point of this article.
Execute the command in the hooks folder to create a post-receive file
vim post-receive
The specific content of post-receive is as follows:
#!/bin/bash
echo 'server: received code push...'
cd /root/demo/my-project
echo 'server: checkout latest code from git...'
git --git-dir=/root/demo/my-project.git --work-tree=/root/demo/my-project checkout -f master
npm install
echo 'server: install success'
npm run build
echo 'server: build success'
pm2 list
pm2 stop my-project
echo 'server: my-project stop'
pm2 start my-project
echo 'server: my-project start'
Special Note: After the creation is complete, post-receive must be given executable permission
The most important command of this script is:
git --git-dir=/root/demo/my-project.git --work-tree=/root/demo/my-project checkout -f master
Meaning of the command: Check out the master branch of the git repository /root/demo/my-project.git to the project directory /root/demo/my-project, thereby updating the code of the project directory.
In the shell script, after checking out the new code, directly run the packaging command (that is, npm run build in the script) to update the deployment folder, and then execute pm2 start my-project so that the front-end service starts on the server (actually You can execute npm start directly)
As for what pm2 is, please search by yourself. pm2 is a node process management tool, which can ensure that the service will not be terminated after closing the terminal. In fact,
our application has already started on the server at this time, and it can be accessed through IP + service port http://118 .xxx.xxx.xxx:3000 (my service port is 3000), but to be accessed like a normal website, you need to use nginx
Nginx
As for how to use nginx to map the service port out, I won’t explain it here. You can study the proxy configuration of nginx by yourself later. The configuration is roughly as follows:
server {
listen 443 ssl;
server_name www.myproject.com;
location / {
proxy_pass http://127.0.0.1:3000;
}
}
client
The git bare warehouse my-project.git was built on the server earlier, and there is only one thing to do when returning to the client: push the code to this bare warehouse.
In the first step, we first add this bare warehouse as a remote warehouse under the local project.
git remote add prod ssh://[email protected]/root/demo/my-project.git
In the second step, we directly push the code to this remote warehouse:
git checkout -b master
git push prod master
Here you must switch to the master branch and push. Because in the remote warehouse hook, we defined the checkout of the master branch, so what we want to push is the master branch.
After pushing, you will see the output we wrote in post-receive on the console. When the push is complete, check the /root/demo/my-project directory under the server, and you will see the source files and packaged files.
So far, the CI/CD work has been completed.
For subsequent continuous deployment work, you only need to execute git push prod master on the client.