preface
After two weeks of busy work, the programmer finished the development task and began the test phase, ready to go live. During the test, we need to modify the bug and deploy it after modification. If you need to log in to the server or deploy it manually after each modification, it will be very troublesome. This is how automated deployment should be implemented.
The preparatory work
First prepare a front-end project my project is a project written in Vue, automated deployment tool Jenkins. Prepare a Linux server, the following work is done on the Linux server, install the Nginx server.
How do I get the Node service running in the background
Here we use the PM2 background to suspend the Node service, and can listen to the node service error information collection log.
Project packagenpm run build
The vue-admin project will build the server and client and give the packaged products, which can be adjusted according to the requirements by using build:client or Build :server. After the package is successfully packaged, we can deploy the project. But it can’t run in the background so we need to modify the configuration and configure pM2 to run in the background.
haoxuan@haoxuandeiMac vue-admin % npm run build
> aming-project@ build /Users/haoxuan/Work/vue-admin
> rimraf dist && npm run build:client && npm run build:server
> aming-project@ build:client /Users/haoxuan/Work/vue-admin
> cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules
95% emittingTotal precache size is about 2.19 MB for14 resources.hash: 5769023a41b07fe5b986 Version: webpack 2.6.1 vUE - SSR-server-bundle. json 168 kB [emitted]Copy the codepm2Configure the background startup service
The installationpm2
Yarn add PM2 or NPM install PM2Copy the codeconfigurationpm2.config.js
Configure the node service startup port number, service name, log storage location, and environment variables. Other configurations can be added as required.
module.exports = {
apps: [{name: 'vue_admin'.script: './server.js'.cwd: '/'.// The current workspace
watch: [
// Listen for changes to the contents of the folder during startup
'build'.'dist'].ignore_watch: [
// Ignore the listening folder
'node_modules'.'logs',].instances: 1.// start 2 instances
node_args: '--harmony'.env: {
NODE_ENV: 'production'.PORT: 3763.DOMAIN: 'https://admin.soscoon.com'
},
out_file: './logs/out.log'.// normal log
error_file: './logs/err.log'.// error log
merge_logs: true.log_date_format: 'YYYY-MM-DD HH:mm Z' // date format}};Copy the codeconfigurationpackage.json
Configure NPM start to start the background running project and monitor it, and NPM stop to close the specified service.
"scripts": {
"dev": "node server"."start": "pm2 start pm2.config.js"."stop": "pm2 stop vue_admin"."build": "rimraf dist && npm run build:client && npm run build:server"."build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules"."build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
}
Copy the codeBy now, our front-end project has completed the deployment configuration, manual deployment has been completed, and the general process is as follows:
git cloneHTTP: / / https://github.com/Tecode/vue-admin.git / / pull projectcdVue-admin // Go to folder YARN // pull dependency NPM run build // Build project NPM start // Start background runningCopy the codeTo access http://localhost:3763, the port number is
Configure projects to automate the build
The tool we are going to use here is Jenkins. By default, you have Jenkins installed on your server.
A new task
New Task Select a task to build freely stylized.
Configure the address of the project to build
I have put the project on GitHub, and you can change the address on other platforms. Item pull is not authorized all do not need to configure credentials, if the item is private click add can add credentials.
configuration-builtshellThe script
Configure the script to build the project and then start the service. Here we don’t need to pull the code. The previous step configured the project address to automatically pull the code to the server when building outside.
My server is a Linux server so I use shell scripts to build projects, Windows servers refer to batch commands. Once the configuration is complete, you can click Save.
echo 'Start building project'
node -v
yarn
npm run build
npm start
echo 'Project build completed'
Copy the code
Manual build
Once you save the configuration, you’ll jump to the project and see the Build Now button, which you can click to build the project now.
Console output at build time
Started by user xm
Running as SYSTEM
Building in workspace /var/lib/jenkins/workspace/vue-admin
The recommended git tool is: NONE
No credentials specified
> git rev-parse --resolve-git-dir /var/lib/jenkins/workspace/vue-admin/.git # timeout=10
Fetching changes from the remote Git repository
> git config remote.origin.url https://github.com/Tecode/vue-admin.git # timeout=10
Fetching upstream changes from https://github.com/Tecode/vue-admin.git
> git --version # timeout=10
> git --version # 'git version 2.27.0'
> git fetch --tags --force --progress -- https://github.com/Tecode/vue-admin.git +refs/heads/*:refs/remotes/origin/* # timeout=10
> git rev-parse refs/remotes/origin/master^{commit} # timeout=10
Checking out Revision db4054a9a67aeda1ada54e2ea1e2cc5e3cf1cd56 (refs/remotes/origin/master)
> git config core.sparsecheckout # timeout=10
> git checkout -f db4054a9a67aeda1ada54e2ea1e2cc5e3cf1cd56 # timeout=10
Commit message: "Configure pM2 running Items"
> git rev-list --no-walk db4054a9a67aeda1ada54e2ea1e2cc5e3cf1cd56 # timeout=10
[vue-admin] $ /bin/sh -xe /tmp/jenkins8066741655429861045.sh
+ echo+ node -v v16.3.0 + YARN install val1.22.5 [1/5] Valpackage. json... [2/5] Resolving packages... success Already up-to-date. Donein 0.51s.
+ npm run build
> build
> rimraf dist && npm run build:client && npm run build:server
> build:client
> cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules
...
Version: webpack 2.6.1
Time: 6079ms
Asset Size Chunks Chunk Names
vue-ssr-server-bundle.json 167 kB [emitted]
+ npm start
> start
> pm2 start pm2.config.js
>>>> In-memory PM2 is out-of-date, do: >>>> $pm2 update In memory pm2 version: 5.1.0 Local pm2 version: 5.1.1 [PM2] Applying Action restartProcessId on app [vue_admin](ids: [1]) [PM2] [vue_admin](1) ✓ ┌ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ id name │ namespace │ version │ mode │ │ pid uptime │ ↺ │ status │ │ CPU mem │ The user │ watching │ ├ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ │ 0 front_end_manager_product │ default │ 1.0.0 │ cluster │ │ │ │ 36 d 0 944483 Online │ 0% │ 71.0 MB │ root │ enabled │ 1 │ vue_admin │ default │ N/A │ cluster │ 2191825 │ 0s │ 0 │ online │ 0% │ 31.8 MB │ root │ enabled │ └ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ [PM2] [WARN] Current process list is not synchronized with the saved list. The Type'pm2 save' to synchronize.
+ echoFinished Project construction completed Finished: SUCCESSCopy the codeAfter the build is complete, we can see that the pM2 service list is already in place and the vue_admin project has been successfully deployed in the run instructions. We can use the IP address of the server directly with the port number to access the website.
Note: the purchased server needs to go to the backend security rules to modify the open port, otherwise the site is not accessible.
IP address to access the website http://47.108.210.200:3763/
I use the server of Aliyun. For the security of the server, only port 80 can be directly accessed by default. Other ports need to be opened and configured in the background of the server.
Configuration of the domain name
In order to facilitate visitors to remember our site, we need to configure a domain name. Here I’m configuring the domain name vue.soscoon.com as a secondary domain name.
Configuring a Secondary Domain Name
First, the domain name must be purchased and registered successfully. Enter the background and click domain name – “Resolution -” to add records. The secondary domain name is added as shown in the picture below. Click “Save” and we can use this domain name. Now direct access to our website is not available, we need to go to the server through the nginx proxy to this domain name.
throughnginxProxy the project to the domain name
If you use nginx server using other servers is also possible, can be able to proxy the port to the domain name can be, here mainly about nginx configuration.
Go to the nginx configuration folder and create vue_admin.conf. Sudo nginx -s reload the configuration file. Visit vue.soscoon.com and your automated deployment is complete.
server { server_name vue.soscoon.com; location / { proxy_buffers 8 1024k; proxy_buffer_size 1024k; proxy_pass http://localhost:3763/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}Copy the codeAt this point we are ready to automate the deployment of the code, simply upload the code to the repository and click Build to complete the deployment.