Table of contents
1. Jenkins configuration parameters
2. Build the front-end code script
3. Additional supplementary related configuration
Foreword:
The server has deployed nginx, jenkisn and npm, based on which the front-end project is deployed,
Subsequent supplementary related nginx and other server installation operations;
1. Jenkins configuration parameters
1. Add a new software item
2. Add project description
3. Configure historical image processing rules
For example: a build task is reserved for up to 30 days, and a maximum of 10 build tasks are reserved
4. Configure the project to build the target server
5. Configure the front-end code address and the branch to be built
6. Configure the front-end code storage location
7. Configure the front-end compiled code script path
Configure temporary variables, and execute the script under the target path to compile the front-end code
2. Build the front-end code script
#!/bin/bash
#1打包前端
echo "package demoWeb..."
#前端代码存放地
cd /app/autopackage/demo/dev/code/demo
#借助npm实现拉取、构建等
export nodejieba_binary_host_mirror=http://前端部署服务器ip/npm/nodejieba/
#信任非http连接,配置node所在路径
NODE_DIR=/app/autopackage/pck_env/node14/bin
#清楚缓存
$NODE_DIR/npm cache clean --force
$NODE_DIR/node $$NODE_DIR/npm config set unsafe-perm=true
$NODE_DIR/node $NODE_DIR/npm fund
$NODE_DIR/node $NODE_DIR/npm run build
echo "package demoWeb...end"
3. Additional supplementary related configuration
1. If the build fails or prompts node-related problems, you can configure node_modules at the location of the code
2. Check the npm configuration path
npm config get prefix
3. View nodehe npm version
node -v
npm -v
4. Find the nodel modul path
npm root -g
npm bin -g
5. Upgrade node
npm install -g -n
or install
npm install
6. nginx configures the corresponding port number mapping to compile the code
Mainly add a new nginx file
The main configuration server is as follows:
server{
listen 9091;#External access port
server_name localhost；
location /{
root /app/autopackage/demp/code/demo/dist/project;#The location of the front-end compiled code
index index.html;#front-end homepage
try_files $uri $url/ /app/autopackage/demp/code/demo/dist/project/index.html;# error page 404 not found can load this configuration
}
}
Refer to the article nginx configuration