How do you deploy the front and back end separation project on the server

Describes how to deploy a front – and back-end separation project using Nginx.

A list,

Article structure:

• This section describes nginx configuration
• Write a script to implement one-click publishing
• How do I deploy the Node service using PM2

Ideas:

Nginx is used as a static resource server to host static files such as HTML, CSS, AND JS images, and then proxies Ajax requests that meet certain criteria to back-end services. Can realize the deployment of the front and back end projects.

In the separated mode of the front and back ends, the front and back ends deploy their own projects respectively, and the request sent from the front end to a service port of the back end will cause cross-domain. Therefore, Nginx is used to set forwarding to solve the cross-domain problem.

Nginx configuration

If you are not familiar with Nginx, please refer to my other article: What you Need to know about Nginx at the front end

• Nginx configuration is posted directly here

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    access_log  /usr/local/etc/nginx/logs/access.log;  #nginx request log address
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        # the front-end
        location /blog {
            root /data/sites/;
            autoindex on;
            expires 30d; Cache for 30 days
            The # HTML file is not set to strong cache, each time the server to confirm whether to update
            if ($request_filename ~ .*\.(htm|html)$) {
                add_header Cache-Control no-cache;
            }
            if(! -e $request_filename) {rewrite^ / (. *)/blog/index.html; }}# back end, only forward /blog/ API requests
	location /blog/api {
            proxy_pass  http://127.0.0.1:3000;
            proxy_redirect     off;
            proxy_set_header   Host             $host;        # pass domain name
            proxy_set_header   X-Real-IP        $remote_addr; # transfer IP
            proxy_set_header   X-Scheme         $scheme;      # Transfer protocol
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            roothtml; }}}Copy the code

One command deploys front-end static resources

Run the script directly
sh publish.sh

NPM can be used after the startup script is configured in the project
"scripts": {
    "publish": "sh build/publish.sh"
}
npm run publish
Copy the code

• publish.sh

#! /bin/bash
branch_name=$(git symbolic-ref HEAD | sed -e 's,.*/\(.*\),\1,')
publishFolder='/data/sites/blog' # nginx target directory
echo On branch: $branch_name
# publish function
fun_publish () {
    echo '\n2. start publish... '
    if [ ! -d $publishFolder ];
        then sudo mkdir -p $publishFolder
    fi
    # recursive overwrite copy
    sudo cp -f -r 'dist/.' $publishFolder
    fun_green_log 'publish success! over~\n'
}
fun_run_log () {
    echo "\033[33m \n$ $* \033[0m"$*}fun_green_log () {
    echo "\033[32m$* \033[0m"
}
if [ $branch_name= ='master'] | | [$branch_name= ='gray' ];
    then
        # build
        echo '\n1. start build... '
        fun_run_log npm run build
        current_path=$(pwd)
        fun_green_log 'build success, publish file list:'
        find ${current_path}/dist -type f
        # make sure
        echo "\nAre you sure to publish to ${publishFolder}? (yes/no)"
        read answer
        if [ $answer! ='yes' ]
            then echo Cancel publish, return!
            else fun_publish # publish
        fi
    else 
        echo "Only the branch:master can publish! You are on$branch_name."
fi
Copy the code

4. Use PM2 to deploy services

Normally, to start the service locally, you need to open the terminal and run NPM run start to start the service. However, when you exit the terminal, the service stops or you need to manually kill the service to restart it again.

Pm2 (Process Manager) is a process management tool. It maintains a list of processes, which can be used to manage your Node processes, take charge of all running processes, and check the status of the Node process. You can start the Node process as a daemon. Functions such as load balancing.

• Common commands

pm2 start server.js   # start service
pm2 list      # list all processes
pm2 restart 0 Restart the service in 0 seconds
pm2 stop 0    # service shutdown
pm2 log 0     Check the process console log
Copy the code

• Parameters that

• Example for Starting services

pm2 start npm --name blog-server  -- run start
Copy the code

Five, the reference

• Deploy node projects automatically using PM2
• What the front end needs to know about Nginx