Docker: deploy Nginx reverse proxy
Environmental preparation
The following services are required
- Docker
- Docker compose (Docker Desktop under Windows / MacOS comes with it, which can be installed without additional installation)
- Node. JS (used to start an express back-end service. If there are other services such as java+tomcat and golang, you don't need to download them)
Experiment 1: deploy Nginx static resource server inside the container
The goal of the first experiment is to start an nginx container in docker and access and return an html page
directory structure
. ├── Dockerfile ├── dist │ └── index.html ├── docker-compose.yml └── nginx.conf
Static resource preparation
First prepare an index html
- /dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nginx config test</title>
</head>
<body>
<h1>/dist/index.html by nginx container</h1>
</body>
</html>
Docker Compose configuration
Next, prepare a docker - compose YML configuration item
- /docker-compose.yml
version: '3.7'
services:
nginx:
image: nginx
ports:
- 8991:80
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
- ./dist:/usr/share/nginx/html
command: /bin/bash -c "nginx -g 'daemon off;'"
We can see local volumes from ngx.inx Conf to replace the default configuration file and map the static file directory dist into the container
nginx configuration
Finally, specify the listening port of nginx service according to the port mapping of docker compose (docker maps the local 8991 port to port 80 in the container, so the nginx configuration should be set to port 80; the above static resource directory. / dist is mapped to / usr/share/nginx/html as the static resource root directory in the container)
- /nginx.conf
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
}
}
}
Start & effect
Finally, start the service to check the effect
docker-compose up -d
- -d indicates that the startup is in the background
- If the nginx image is not pulled in advance, it will be pulled automatically first
- According to docker compose YML boot container
- According to nginx Conf start nginx service
Finally, visit 8991 and you should be able to see the page
Experiment 2: Nginx reverse proxy native service
The goal of Experiment 2 is to use nginx container to reverse proxy back to the service on the local port
Prepare Express service
This article uses express to start a back-end service, and any other service can also be used
- server.js
const express = require('express');
const app = express();
const port = 8080;
app.get('/', (req, res) => {
res.send('Response from localhost:8080');
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}!`);
});
Then install the dependency locally
npm init -y npm install express npm install nodemon -D
Add startup script
- package.json
{
// ...
"scripts": {
"start": "nodemon server.js"
}
}
Start service
npm run start
Test whether the service is started successfully on the local access port
Modify Docker Compose configuration
Compared with experiment 1, experiment 2 only needs to add a new port mapping
ports: - 8992:8999
Complete configuration items
- docker-compose.yml
version: '3.7'
services:
nginx:
image: nginx
ports:
- 8991:80
- 8992:8999
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
- ./dist:/usr/share/nginx/html
command: /bin/bash -c "nginx -g 'daemon off;'"
Modify nginx configuration
Since we have added a new port mapping to the container, we only need to configure one more server in nginx
- nginx.conf
events {
worker_connections 1024;
}
http {
server {
listen 8999;
server_name localhost;
location / {
proxy_pass http://host.docker.internal:8080;
}
}
}
Note that a special domain name, host, is used here docker. Internal, docker will automatically forward the request to the host to the local machine, so that you can access the local service outside the container
test
Finally, when we access port 8992 locally, we will first access 8999 of nginx container and use proxy_pass retransmits port 8080 on this machine
Experimental summary
This paper has practiced the following techniques
- Start the docker container using docker compose
- Static resource distribution & service forwarding using nginx
- Use the special domain name host docker. Internal points to the local machine from inside the container
Reference connection
| Title | Link |
|---|---|
| Use Docker Compose - docker docs | https://docs.docker.com/get-started/08_using_compose/ |
| nginx - DockerHub | https://hub.docker.com/_/nginx |
| Nginx actual combat: deploy React front-end project | https://blog.csdn.net/weixin_44691608/article/details/120624970 |
Complete code example
https://github.com/superfreeeee/Blog-code/tree/main/deployment/docker/docker_http_proxy_nginx