1. Front-end Dockerfile
If the backend API path is
http://localhost:8000/api
FROM node:14
WORKDIR /app
COPY. /App
ENV REACT_APP_REST=/api
RUN npm install
RUN npm i -g serve
RUN npm run build
EXPOSE 5000
CMD ["serve", "-s", "build"]
2. Back-end Dockerfile
FROM node:14
WORKDIR /app
COPY. /App
RUN npm install
EXPOSE 8000
CMD ["npm", "run", "serve"]
3. Use the backend endpoint of Express JS
The endpoint starts with the /api we defined on the front end
const express = require("express");
const app = express();
const games = require("./api");
const cors = require("cors");
app.use(cors());
app.use(express.json());
app.get("/api/games", ({res}) => {
res.status(200).json(games);
});
const port = 8000;
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
4. Nginx's DockerFile
FROM nginx:latest
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
5. Create Nginx configuration
events {
worker_connections 768;
# multi_accept on;
}
http {
server {
listen 80 default_server;
listen [::]:80 default_server;
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html =404;
location / {
proxy_pass http://frontendreact:5000;
}
location /api {
proxy_pass http://backendnode:8000;
}
}
}
6.docker-compose
version: "3.9"
services:
backendnode:
build: ./backendnode
expose:
-"8000"
volumes:
-./backendnode:/usr/src/app
frontendreact:
build: ./frontend
expose:
-"5000"
volumes:
-./frontend:/usr/src/app
nginx:
build: ./nginx
ports:
-"80:80"
links:
-frontendreact
-backendnode
restart: always
发表评论 取消回复