Once the project is developed, it’s time to deploy the project to the server. Some friends may think, this is not the operation of the students to do it, what do I have to do. Yes, it does. We need to provide enough deployment information to go live. Learn about deployment preparation and deployment process from deployment tools

Nginx

Nginx is currently the most popular reverse proxy server, which functions like a server side butler. When a user sends a request to the server, nginx usually receives the request first and determines the specific application service according to the URL of the request. For example (using Baidu as a scenario for easy understanding, not baidu’s official technology implementation) :

  1. I visit https://www.baidu.com, nginx receives the URL, determines it is a page, and forwards the request to the front-end service, which returns the HTML file

  2. According to the HTML file, the user initiated some CSS, JS, IMG requests, nginx also forward to the front-end service to return the corresponding resources

  3. Users search word at this time the front-end efficiency speed series, originating front-end XHR requests suppose to https://api.baidu.com/search?word= word front efficiency speed of series, nginx forwarded to the back-end service, interface data returned by the back-end service.

The basic process is: the user requests, nginx to determine which service to send, the corresponding service after the processing results back to Nginx. How does nginx work? Let’s see how it works:

Install nginx on MacOS

Install with Homebrew:

brew install nginx

Here is the output after installationPouring nginx-- 1.21.5.big_sur.bottles.tar.gz ==> Caveats# /usr/local/var/www is the default static file directory
Docroot is: /usr/local/var/www

# / usr/local/etc/nginx/nginx is conf configuration file path
The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.
Copy the code

Nginx basic commands

If the port has been started or is occupied, an error will be reported
nginx

# Test the syntax of the configuration file, and print the path of the configuration file
nginx -t

After the previous step is successful, restart nginx to apply the latest configuration
nginx -s reload

Copy the code

Once started, you can see Welcome to Nginx! At http://localhost:8080/.

Nginx common application scenarios

Let’s start with an important section of nginx’s default configuration

Server {# listen to port 8080; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; Here is the static files service corresponding to the root directory, relative path/usr/local/opt/nginx/HTML index index. The HTML index. HTM; The default page, i.e. visiting http://localhost:8080/ is equivalent to accessing the root directory index.html}Copy the code

Based on the default configuration, we can obviously use it as a local static server with minor modifications, including port, file root, and default pages. But there are other scenarios we encounter at work, one by one:

  1. Enable gzip compression, generally speaking, static file services brainless open on the line, for better performance can be CDN
Gzip on line 33;Copy the code
  1. Many students will worry about the code update online but does not take effect in the cache, if the package js, CSS files have hash values, as the index of the HTML file can be configured not to cache
The location / {# # to HTM | HTML at the end of the file with no cache request header if ($request_filename ~ *. * \. (? :htm|html)$) { add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; } root html; index index.html index.htm; }Copy the code

  1. E-tag is used to Control the Cache if the file name does not change. E-tag is a negotiated Cache and has a lower priority than cache-control. Nginx is turned on by default, just make sure no Etagoff is actively turned off. The return header will have an ETag column.

  2. Single-page applications. Official projects like Vue and React are single-page applications that have only one index. HTML after being packaged. In this case, routes have hash mode and history mode. If history mode is used, incorrectly configuring the page refresh results in 404

The reason is that when you use the nginx default configuration, the home page localhost:8080/ is accessible, but when you go to another page such as localhost:8080/goodsList, the front end actually controls the route and does not request again, then you refresh the page, If nginx is configured to look for goodslist. HTML or goodslist/ index.html, it will report 404

This situation is explained by vue-CLI official website. Just point all path requests to index.html, and the front-end application will judge the rendered page based on the current path. The specific configuration is as follows:

location / { root /app; index index.html; Try_files $uri $uri/ /index.html; }Copy the code
  1. Multiple single-page applications. For performance reasons, Webpack sets different entries for irrelevant services and packages multiple HTML, which can be deployed and accessed according to the following configuration/public/buyerThe initial path will point tobuyer.html
	location /public/buyer {
        root   html;
        index  buyer.html;
        try_files $uri /public/buyer.html;
    }

	location /public/seller {
        root   html;
        index  seller.html;
        try_files $uri /public/seller.html;
    }

Copy the code
  1. Hybrid deployment of front-end and back-end applications
# the backend application/API/v1 / opening will be redirected to the http://xxx.xxx.xxx.xx:3030/ location/API/v1 / {proxy_pass http://xxx.xxx.xxx.xx:3030/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # location / {root /app; index index.html; try_files $uri $uri/ /index.html; }Copy the code
  1. Configuration of the domain name
Server {# port 80 = 443; # listen 443 ssl; Server_name Enter the domain name www.xxxx.com;Copy the code
  1. Always 404? Use alias instead of root to specify the root directory and see the difference directly
# root, request http://xxx.com/css/style.css will find/data/CSS/style.css. CSS location/CSS / {root/data; Request http://xxx.com/css/style.css} # alias, I'll find/data/style.css. CSS location/CSS / {alias/data /; }Copy the code

The difference is that the alias configuration must end/and truncates the path

List so many scenes, everyone likes favorites, come across to see if they can use

What are forward and reverse proxies?

Forward proxy can be understood as the client’s proxy, which is handed over to the agent to initiate a request when initiating a request, such as: game acceleration, scientific Internet tools; A reverse proxy is a server-side proxy that forwards requests to other services, such as Apache, Nginx, and Tomcat.

Docker

Server resource utilization – Transformative virtual container technology Docker! What is it, what does it do in a project, and what can the front end do with it

What is the Docker

Docker is a virtualization technology at the operating system level, which can create an operating environment isolated from the host machine, such as file system, network and process, for applications. It is lighter and faster than traditional virtual machine technology.

Before a container is virtualized, a set of hardware (such as cpus, memory, and disks) is virtualized, and an operating system (OS) is run on the hardware and applications are run in the system. The operating system consumes a large amount of resources, such as hard disks and memory. But Docker is lighter and more efficient because containers share the host’s operating system kernel and are isolated in resource allocation.

What does Docker do in the project

Docker is usually used for project deployment in online or test environment in the team. Its advantages are stable application environment and convenient migration. Online container choreography may be performed with K8S (or only K8S) to facilitate cluster deployment, on-demand resource allocation, and server disaster recovery

What can the front end do with Docker

For developers, the most convenient function of Docker is to help us build the development environment. After preparing the configuration for nginx, mysql, front-end application and back-end application in the project, the environment can be installed and started with one click. Working within a team can greatly speed up the installation of a development environment. Docker one-click deployment of front and back end projects

Simple installation and use

Basic flow: Install -> Write a configuration file -> Start

  1. Download the Docker desktop application corresponding to the operating system from the official website and start it

  2. Download the actual code, which has five prepared project image configuration

  3. Edit/modify Dockerfile file, configuration image, reference actual code webapp/ dockerfile-dev configuration;

  4. Compose/modify the compose file, start the image as a container in order, and start 5 containers according to the docker-comement-dev. yml configuration of the actual code;

  5. Docker-compose -f docker-compose-dev.yml up -f docker-compose -f docker-compose-dev.yml up -f Mysql + nginx + mysql + nginx

  6. After successful startup, visit http://localhost:3030/ to view the deployed page and point to the front-end project WebApp; http://localhost:3030/api/ points to the back-end nest – server project.

  7. If startup is unsuccessful, try the following commands (use these commands online with caution)

# Stop all containers
docker stop $(docker ps -aq)
Delete all stopped containers
docker container prune
Docker-compose redraw the image
docker-compose up -d --build
# Try to start again
docker-compose -f docker-compose-dev.yml up
Copy the code

Learning resources

  • Full tutorial: Docker — from getting started to practice
  • Deploy front and back end projects with Docker one-click
  • Docker official documentation
  • Docker Compose official documentation
  • More Docker resources

Jenkins

Once the project is written, it’s time to deploy to a test or online environment. If it is a statically built front-end project, we need to NPM run build and then package the file, use SCP command or FTP tool to copy to the server nginx directory to complete the deployment. Not only can the copy be made after the construction is completed, but the copy also needs to be connected to the server, which is a little tedious. At this time, we can consider using Jenkins to automate the deployment.

The benefits of using Jenkins include:

  1. After the deployment task is configured, click Execute to complete the pull code -> Package -> Deploy one dragon
  2. You can use Git services, scripts, and other methods to automatically trigger deployment tasks when code is submitted
  3. You can configure a mailbox or notification robot to receive notification of successful deployment
  4. You can view the failure output and cause on the console by viewing task execution details

The installation

Please refer to the documentation for the steps to install and run Jenkins on the server:

  • Start using Jenkins
  • Jenkins- Continuous Integration Platform (Installation)

Configuring deployment Tasks

  1. Enable NodeJS plug-in
  2. Home -> System Administration -> Global Tool Configuration, configuration node download and installation
  3. Home -> New -> Create a new task, select build free style software project
  4. Configure basic information, configure repository information -> Select Git repository
  5. Add build steps, usuallynpm install && npm run build
  6. Setting up post-build operations is to copy the packaged dist directory to nginx’s static service directory

Usually, we developers can provide git repository and deployment commands, and other complete steps can be configured together with o&M or backend students.

Seven, the front-end need to understand the back-end common tools