Manual deployment

The packaged file
  • When packaging front-end projects, js files need to be split and packaged
    • Different subroutes correspond to different components > different JS files
    • If you pack all the JS content into a SINGLE JS file, all the JS files will be loaded directly upon entering the page, resulting in a slow rendering rate
    • If the JS content under different routes is packaged separately, only the JS file needs to be requested under the route to parse the JS content
  • React and Vue both provide lazy route loading solutions to implement split packaging
  • Place the build-generated build folder on the server: /data/project/cloud-music
Project profile

  • Create a new folder under /usr/local/nginx: project-conf

  • Create a new cloud-music.conf file in this folder: this file will be used to configure nginx

    server { listen 9001; server_name www.xdhonline.cn; location / { root /data/projects/cloud-music/build; index index.html index.htm; }}Copy the code

  • The benefit: Each project has its own separate configuration file for easy management

  • The configuration file of the project can also be stored in the project storage file, not in this folder

Configure nginx
  • Edit nginx configuration file: / usr/local/nginx/conf/nginx. Conf
  • Set the Nginx permission to root: user = root
  • Include /usr/local/nginx/project-conf/*.conf 
    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } user root; http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' #  '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; #server { # listen 80; # server_name 49.232.83.17; #charset koi8-r; #access_log logs/host.access.log main; # location / { # root html; # index index.html index.htm; # } #location /www/ { # root /data/test/; # index index.html index.htm; #} #location /images/ { # root /data/test/; # autoindex on; #} #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # #error_page 500 502 503 504 /50x.html; #location = /50x.html { # root html; #} # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php${# proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php${# root HTML; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} # } # another virtual host using mix of IP-, name-, And port-based configuration upstream {server 127.0.0.1:8080; Include /usr/local/nginx/project-conf/*.conf; server { listen 443 ssl; server_name www.xdhonline.cn; ssl_certificate /data/ssl/1_xdhonline.cn_bundle.crt; ssl_certificate_key /data/ssl/2_xdhonline.cn.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:! aNULL:! MD5; ssl_prefer_server_ciphers on; location / { uwsgi_pass django; include /usr/local/nginx/conf/uwsgi_params; root html; index index.html index.htm; } location /static { alias /data/projects/auction/auction_server/collect_static/; } server { listen 80; server_name www.xdhonline.cn; rewrite ^(.*)$ https://$host$1 permanent; }}Copy the code
Restart the nginx
  • nginx -s stop && nginx
  • Or nginx -s reload
  • Before is the need to enter the nginx sbin folder to execute the command, now establish a soft connection directly execute 
    Edit the /etc/profile file vim /etc/profile // 2. Add the configuration PATH = $PATH: / usr/local/nginx/sbin export PATH / / 3. Make the configuration take effect source /etc/profileCopy the code
Test access
  • www.xdhonline.cn:9001

Automated deployment

The whole process

Installing the Java Environment
  • Check whether the local Java environment is built-in 
    yum list installed | grep java
Copy the code
  • Uninstall Java as user root 
    Yum -y remove Java -1.8.0-openjdk* yum -y remove tzdata-java*Copy the code
  • View the Java installation package in the YUM repository 
    yum -y list java*
Copy the code
  • Install the Java 
    Yum -y install Java -- 1.8.0 comes with its *Copy the code
  • Find the Java installation path 
    Java ls-lrt /usr/bin/java and press enter ls-lrt /etc/alternatives/ Java. In the JVM directory, enter CD /usr/lib/jvm to jump to the JVM directory and enter ls to list the files and folders in the current directoryCopy the code
  • Configure Java environment variables 
    #Enter the Configuration file
vim /etc/profile

#Add the following commandExport JAVA_HOME=/usr/lib/ JVM /java-1.8.0 export JRE_HOME=$JAVA_HOME/jre export PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib
#Save to exit and make the configuration take effect
source /etc/profile
Copy the code
Install Jenkins

  • The installation

    #Method 1
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
yum install jenkins
Copy the code

  • Modify the configuration

    vim /etc/sysconfig/jenkins

#Example Change the user name to root
JENKINS_USER="root"

#Configure an unused port
JENKINS_PORT="8088"

#Check whether the Java path is the same as the installation path
candidates="
/opt/bin/java
"
Copy the code

  • Restart the Jenkins

    service jenkins restart
Copy the code

  • Start the

    systemctl start jenkins
Copy the code

  • Check the status

    systemctl status jenkins

#If active Running is displayed, it is successful
Copy the code

  • Access to the address

    • http://www.xdhonline.cn:8088 HTP: / / 49.232.83.17:8088Copy the code

  • Install plug-ins and register users

  • Log in using admin

    • Obtaining the Login Password 
      vim /var/lib/jenkins/secrets/initialAdminPassword
Copy the code
    • Change the password of user admin
      • System Management > Manage Users > Admin > Settings
Configuration Jenkins

  • Install the plug-ins required for automated deployment

    • NodeJS Plugin
    • Publish Over SSH

  • Configure SSH

    • System > System Configuration > Publish Over SSH

  • Configuration NodeJS

    • System Management > Global Tool Configuration > NodeJS

Deployment project
  • New task: Cloud-music
  • Task configuration:
    • General: select discard old builds, keep the build days 7, and keep the maximum number of builds 5
    • Source code management: Github project address, enter username and password
    • Build trigger: Check the polling SCM: H 2 * * *
    • Build the environment: Check Provide Node & NPM bin/ Folder to PATH
    • Build: Check execute shell 
      PWD ls node -v NPM -v git --version Java -version echo '${BUILD_NUMBER} NPM install NPM run build PWD echo 'Build complete' nginx -s reloadCopy the code
    • Post-build operation
      • Select Send Build artifacts over SSH

    • save
The subsequent operation
  • Later, I changed the code, just need to submit to Github, and then go to Jenkins to enter the corresponding task and select Build now
Bug to solve
  • Problem: A 404 error occurs when a child route is refreshed after the project is successfully deployed
  • Solution: Add configuration try_files to cloud-music.conf of the project
    u r i uri     uri/ /index.html 

    server { listen 9002; server_name www.xdhonline.cn; location / { root /data/projects/cloud-music-jenkins/build; index index.html index.htm; try_files $uri $uri/ /index.html; }}Copy the code
Other content
  • SEO optimization: refers to the user in the search engine when the search to make their site as high as possible