How to use docker-compsoe to deploy a project with front-end and back-end separation

Say it in advance

We all know that Docker can achieve a very simple deployment environment. Now we have a project with separated front-end and back-end. The front-end is developed based on Vue and packaged into a dist folder using Webpakc. The backend is a Node.js service that provides an API interface. The frontend and backend are separated. So we must have a container for the front-end project and a container for the back-end project. Then if it is in a production environment, cross-domain problems will arise. The front-end request needs to be reverse proxied to the back-end. The first thing that comes to mind is to use Nginx to set proxy_pass. Yes, that's right. So we had these ideas. How do we do this with docker-compose?

Get started

In fact, I just started to understand docker. So there are many things that are not understood. For example, in Docker, a container is generated through an image, so this container can be regarded as an independent system, and this system also has its own independent port. So, just like our previous requirement, suppose our front-end exposes port 80 in container1 and maps it to port 80 of the host machine, and the back-end exposes port 3000 in container2 and maps it to port 3000 of the host machine. So when we reverse proxy the request, do we do it through the host machine or through the container? I consulted and learned a lot of other big guys' articles on the Internet, as well as the official website's documents. It is found that this requirement can be achieved directly through the container. Why? Because docker-compose will build all containers under the same network, if we want to find other containers, we only need to find them through the service name in docker-compose. Let's take a look at our catalog:

vueMusic
 ├─ .git
 ├─ .gitignore
 ├─ LICENSE
 ├─ README.md
 ├─ babel.config.js
 ├─ dist
 ├─ docker-compose.yml
 ├─ docs
 ├─ nginx.conf
 ├─ package-lock.json
 ├─ package.json
 ├─ public
 ├─ server
 ├─ src
 └─ vue.config.js

dist is our front-end project, and server is our back-end project. Let's take a look at our docker-compose.yml:

version: '3'
 services:
 music-web: #service name of the front-end project
   container_name: 'music-web-container' #Container nameimage: nginx #Specify the imagerestart: always
   ports:
   - 80:80
   volumes: 
   - ./nginx.conf:/etc/nginx/nginx.conf #Mount nginx configuration - ./dist:/usr/share/nginx/html/ #Mount project depends_on:
   - music-server
 music-server: #The service name of the backend project
   container_name: 'music-server-container'
   build: ./server #Build the image based on the Dockerfile in the server directory restart: always
   expose:
   - 3000

As you can see, we use the volumes property to mount the host's nginx.conf to the nginx configuration file in the container to overwrite the original configuration file, and also mount dist to the container. We expose the container of the front-end project and map it to port 80 of the host machine, and we expose the container of the back-end project to port 3000. So where do we implement the reverse proxy request? 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 settings 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;
     }
   }
 }

You can see the proxy_pass http://music-server:3000/; above. Music-server is the service name of our backend project. We use the service name to find the container, thus realizing the reverse proxy.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.