Said in the previous

As we all know, Docker can implement a very simple deployment environment. We now have a project that separates the front and back ends, with the front end developed on Vue and packaged as the Dist folder using Webpakc. The back end is a Node.js service that provides an API interface, and the front end and back end are separated. So we must have a container for the front-end project and a Container for the back-end project. If you are in a production environment, cross-domain problems can occur. Requests from the front end are reverse-proxy to the back end. The first thing that comes to mind is setting proxy_pass using Nginx. Yes, there’s nothing wrong with that. So we have these ideas. How do we do that with Docker-compose?

start

Actually, I just started to understand Docker. For example, in Docker, image is used to generate a container, so the container can be regarded as an independent system, and the system has its own independent port. So just like our previous requirement, let’s say our front-end exposes port 80 in Container1 and maps to port 80 on the host, and our back-end exposes port 3000 in Container2 and maps to port 3000 on the host. Do we reverse proxy requests through the host or container? I read and learned a lot of other big shots’ articles on the Internet, as well as documents on the official website. It was found that this requirement could be implemented directly through containers. Why is that? Because Docker-compose will build all containers in the same network, we need to find other containers, we only need to find the service name in docker-compose. Let’s take a look at our catalogue:

Voemusic ├─.git ├─.Gitignore ├─ LICENSE ├─ Readme.md ├─ Babel.config.js ├─ Dist ├─ Docker-come.yml ├─ docs ├─ Nginx. Conf ├ ─ package - lock. Json ├ ─ package. The json ├ ─ public ├ ─ server ├ ─ SRC └ ─ vue. Config. JsCopy the code

Dist is our front-end project, server is our back-end project. Let’s take a look at our docker-comemage.yml:

  version: '3'
  services:
  music-web:  Service name of the front-end project
      container_name: 'music-web-container'  # container name
      image: nginx  # select mirror
      restart: always
      ports:
      - 80:80
      volumes: 
      - ./nginx.conf:/etc/nginx/nginx.conf  # Mount nginx configuration
      - ./dist:/usr/share/nginx/html/    # Mount the project
      depends_on:
      - music-server
  music-server:    The service name of the backend project
      container_name: 'music-server-container'
      build: ./server  Build the image from the Dockerfile in the server directory
      restart: always
      expose:
      - 3000
Copy the code

As you can see, we used the volumes property to mount the host nginx.conf to the nginx configuration file in the container, overwriting the existing configuration file and also mounting dist to the container. We expose and map the container of the front-end project to port 80 of the host, and we expose the container of the back-end project to port 3000. So where do we implement reverse proxy requests? Please see nginx. Conf:

  #user nobody;
  worker_processes  1;
  events {
      worker_connections  1024;
  }
  http {
      include       mime.types;
      default_type  application/octet-stream;
      sendfile        on;
      #tcp_nopush on;
      #keepalive_timeout 0;
      keepalive_timeout  65;
      #gzip on;
      gzip on;
      gzip_min_length  5k;
      gzip_buffers     4 16k;
      # gzip_http_version 1.0;
      gzip_comp_level 3;
      gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
      gzip_vary on;
      server {
          listen  80;
          server_name  www.xieyezi.com;
          # Music APP project
          location / {
          index index.html index.htm;   # Add attributes.
          root /usr/share/nginx/html;   # site directory
          }
          # Music APP project set up proxy forwarding
          location /api/ {
          proxy_pass  http://music-server:3000/;
          }
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root/usr/share/nginx/html; }}}Copy the code

Check out proxy_pass http://music-server:3000/; . Where music-server is the service name of our back-end project, we find the container by the service name, so as to realize the reverse proxy.

The deployment of

  1. Go to our server, specify a directory, and pull our project with Git.
  2. Go to the root directory of the project and executedocker-compose up -dRun the service.
  3. performdocker psYou can see the container we just started.

Architecture diagram for deployment

Here’s another project of mine: Resume

conclusion

We should keep a pious and modest attitude to study. You may already be familiar with a certain area, so don’t be patronizing when someone asks you for advice. Every powerful bull is the growth of small people, everyone has such a process. So, life is short, be kind.