This article is the last article in this series, because the landlord is busy with the graduation project recently, so this is also an article that has been dozed for a long time. This article focuses on the deployment part of the project, including:

  1. How to deploy the project to the Nginx server.
  2. Configure certificates for it to run over HTTPS, etc.

Project review

This is a CREat-React-APP2 based PWA project. Can be added to the home screen and can run offline. Project address: browseExpbyReact

This article can be taken entirely apart from this project, and the following is applicable to a simple deployment of most personal SPA projects.

How to deploy

How will this project be deployed to the server once it is complete? The web server used in this project is Nginx. Nginx is an asynchronous Web server that uses asynchronous event drivers to process requests and is designed for performance. First, in order for us to access the project, we need to configure a reverse proxy for our project that proxies our access to the server to the project; Then, because our project is a PWA project, we need to configure the certificate and upgrade it to HTTPS so that we can experience the PWA features.

Start by writing a back-end service

First we’ll write a back-end service that gives us access to the project’s entry page, index.html, and uses Express to write a simple service.

const fs = require('fs')
const path = require('path')
const express = require('express')

const app = express();

app.use(express.static(path.resolve(__dirname, './build')))
app.get(The '*'.function(req, res) {
  const html = fs.readFileSync(path.resolve(__dirname, './build/index.html'), 'utf-8')
  res.send(html)
})

app.listen(3003.function() {
  console.log('server listening on port 3003! ')})Copy the code

With Express, we have opened a service on port 3003 locally to access our project. Since our application is a single page, we can access the entry page. Then we need to use something like FTP to upload our project to our server and run the Node service. So now our project is running on port 3003 on the server.

Configuring a Reverse Proxy

Our project is already running on port 3003 on the server, so we need to configure a reverse proxy to reverse proxy our access to the server to 127.0.0.1:3003 on the server. Add configuration files to the corresponding nginx folder, usually the conf.d folder in the nginx folder. In this project, add configuration files to the etc/nginx/conf.d folder. Create a configuration file holyzheng-top-3002 for the project in /etc/nginx /conf.d. The name here usually has certain conventions, so that I can organize and distinguish projects by myself. Add something to this file:

Upstream {server 127.0.0.1:3003;# instance, corresponding to our project
}

server {
  listen 80; # HTTP listening port
  server_name browseexpreact.holyzheng.top; # I want to use the IP domain name
  error_page 405 =200 @405; Allow POST requests to static resources
  location @405 {
    proxy_pass http://browseexpreact;
  }
  rewrite ^(.*) https://$hostThe $1 permanent; Redirect HTTP to HTTPS
}
Copy the code

The configuration here means reverse proxy our HTTP request to this server (default port 80) to our server for the running instance of 127.0.0.1:3003, which is our project.

Upgrade to the HTTPS

To upgrade to HTTPS, first apply for a certificate from our server vendor, then download the certificate locally and upload it to your own server, usually in the cert folder under the nginx folder. This project is /etc/nginx-cert. After the certificate is uploaded to the server, modify our configuration:

Upstream {server 127.0.0.1:3003;Example #
}

server {
  listen 80; # HTTP listening port
  server_name browseexpreact.holyzheng.top; # I want to use the IP domain name
  error_page 405 =200 @405; Allow POST requests to static resources
  location @405 {
    proxy_pass http://browseexpreact;
  }
  rewrite ^(.*) https://$hostThe $1 permanent; Redirect HTTPS to HTTPS
}

Add the following configuration
server {
  listen 443;
  server_name browseexpreact.holyzheng.top;
  # This part of the configuration will be prompted when applying for a certificate, just copy and paste itssl on; ssl_certificate /etc/nginx/cert/cert-1540814527008_browseexpreact.holyzheng.top.crt; ssl_certificate_key /etc/nginx/cert/cert-1540814527008_browseexpreact.holyzheng.top.key; ssl_session_timeout 5m; ssl_protocols SSLv2 SSLv3 TLSv1; ssl_ciphers ALL:! ADH:! EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP; ssl_prefer_server_ciphers on;if ($ssl_protocol = "") { Determine whether the user enters a protocol
    rewrite ^(.*) https://$hostThe $1 permanent;
  }

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;

    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;

    proxy_pass http://browseexpreact; The instance to be proxied}}Copy the code

When you apply for a certificate, you will be prompted to copy the corresponding configuration to your own configuration file. New configuration for HTTPS request (443 by default), reverse proxy our HTTPS request to server (443 by default) into the server running instance 127.0.0.1:3003, is our project. So far, we can access our project via HTTPS requests.

Keep the project running in the background

At present, we find that as long as we turn off the console on the server side, the Express service will be broken and we can no longer access the project, so we need a tool to keep our Express service running in the background. The tool used in this project is PM2. PM2 is a process manager for Node applications with load balancing capabilities. It keeps processes running and can be used to manage multiple Node projects simultaneously on the server. Common basic instructions are:

NPM install Pm2 -g: global installation. Pm2 start app.js: Starts the service. The entry file is app.js. Pm2 restart [name or ID] : restarts the service. Pm2 list: Displays the list of running items. Pm2 delete [name or ID] : deletes itemsCopy the code

With PM2 we can keep our projects running continuously on the server. We can then access our project via HTTPS requests.