Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use docker-compsoe deployment front-end separation of the project, the article introduces in great detail, has a certain reference value, interested friends must read it!

Start to do it.

Actually, I just got to know docker. So there are a lot of things I don't understand, for example, in docker, a container is generated through image, then the container can be regarded as an independent system, and the system has its own independent port. So, as we just did, suppose our front end exposes port 80 in container1 and maps to port 80 of the host, while the back end exposes port 3000 in container2 and maps to port 3000 of the host. When we reverse the proxy request, should we reverse the proxy through the host or through container? I looked up and studied a lot of articles by other bosses on the Internet, as well as documents on the official website. It is found that this requirement can be achieved directly through container. Why? Because docker-compose will build all the container under the same network, if we want to find other container, we only need to find it through the service name in docker-compose. Let's take a look at our catalog first:

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 container_name of the front-end project: 'music-web-container' # container name image: nginx # specify image restart: 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: # service name container_name of the backend project: 'music-server-container' build:. / server # build the image restart: always expose:-3000 based on the Dockerfile under the server directory

As you can see, we mount the nginx.conf of the host to the nginx configuration file in the container through the volumes attribute to overwrite the original configuration file and mount the dist to the container at the same time. 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 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 Agent forward location / api/ {proxy_pass http://music-server:3000/;} error_page 500502 503 504 / 50x.htl; location = / 50x.html {root / usr/share/nginx/html;}

You can look at the proxy_pass http://music-server:3000/; above. Where music-server is the service name of our back-end project, we find this container through the service name, thus implementing the reverse proxy.

These are all the contents of the article "how to deploy front-end and back-end separate projects with docker-compsoe". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.