Table of contents
- I. Introduction
- 2. Create a new front-end pipeline
- 3. Configure the front-end pipeline
-
- 1. Enter the newly created task page and click Configure
- 2. General configuration
- 3. Set the node to run the project
- 4. Source code management
- 5. Build triggers (set all triggers to empty)
- 6. Configure the shell script
- 7. Add post-build actions
- 8. After saving, click Build Now
- 9. Whether the construction service is successful
- Fourth, check whether the service is started
- 5. Access the front-end page
I. Introduction
1. Nginx has been installed on the server. If it is not installed, please refer to this blog: [Shell Script] Linux installs Nginx and boots automatically.
2. If there is an attempt, create a new task directly; if there is no view, create a new view. Can.One view per project
2. Create a new front-end pipeline
1. Click New Task
2. Fill in the name of the pipeline (here I choose a free-style software project), the general format of the task name is: project name-front-end and back-end
3. The result after successful creation
3. Configure the front-end pipeline
1. Enter the newly created task page and click Configure
2. General configuration
Description: XXX front-end-front-end XXX service test environment-project construction
Creator: Creator name
Time: Creation time
Keep building days: 2
Keep maximum number of builds: 3
3. Set the node to run the project
The nodes here depend on the specific configuration of the Jenkins cluster, the nodes configured when Jenkins is installed. The current Jenkins configuration is Front_Node. (If it is a newly built Jenkins, check the slave node name configured during installation)
4. Source code management
4.1. If you have not configured a git account, you need to configure a git account
After the addition is complete, select your newly added credentials
5. Build triggers (set all triggers to empty)
6. Configure the shell script
6.1. The shell script is configured according to its own packaging requirements (the configuration here corresponds to the front-end project packaging), and the reference items are given below
#!/bin/sh
echo $PATH
node -v
npm -v
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install
npm run build-dev
cd ns-front
rm -rf ns-front.tar.gz
tar -zcvf ns-front.tar.gz *
cd ../
6.2. View the command to run the project
In package.json in the front-end project, you can see the commands we use when starting the front-end project
7. Add post-build actions
8. After saving, click Build Now
9. Whether the construction service is successful
Fourth, check whether the service is started
1. Check whether there is a successfully built front-end file in the server
2. Upload the dist file packaged by the front end
2.1, package the front-end code
npm run build
At this time, the dist file directory will appear in the directory structure
2.2. Compress the dist file directory
2.3. Manually upload dist.zip to the server
2.4. Unzip dist.zip
#查看上次好的dist.zip
cd /tmp/
ls
#移动dist.zip
sudo mv dist.zip /usr/share/nginx/html
#切换至/usr/share/nginx/html路径下
cd /usr/share/nginx/html
ls
#解压dist.zip
sudo unzip dist.zip
3. Modify the nginx.conf file
Because it is the front end, mapping is required, so the configuration file of nginx needs to be modified
3.1. Enter the location of the nginx.conf file
#切换至nginx.conf路径
cd /usr/local/nginx/conf
3.2. Modify the nginx configuration file
#进入nginx.conf
vi nginx.conf
Enter i to edit, after editing, press ESC, :wq to save and exit!
3.3. Restart nginx
Enter the upper-level path where nginx.conf is located, and restart nginx
#重启nginx配置文件
sudo ./sbin/nginx -s reload
#查看nginx进程
ps aux|grep nginx
5. Access the front-end page
