跳到主要内容

部署

2024年07月07日
柏拉文
越努力,越幸运

一、认识


二、目录


|- src 
|- .dockerignore
|- docker-compose.yml
|- Dockerfile
|- nginx.conf
|- package-lock.json
|- package.json

三、Dockerfile


FROM node:latest as builder
WORKDIR /app
COPY package*.json /app
RUN npm install
COPY . /app
RUN npm run build

FROM nginx:latest
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx/conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

四、nginx.conf


events {}

http {
server {
listen 80 default_server;

location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}

# 代理服务
# location /api {
# proxy_pass http://localhost:3000;
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header X-Forwarded-Proto $scheme;
# }
}
}

五、.dockerignore


dist 
.gitignore
README.md
node_modules

六、docker-compose.yml


services:
web:
build:
context: .
dockerfile: Dockerfile
ports:
- "9090:80"
networks:
- webnet

networks:
webnet:
driver: bridge

七、构建和运行服务


在项目根目录下运行以下命令以清理缓存并重新构建:

docker-compose build --no-cache
docker-compose up

八、验证服务


在浏览器中访问 http://localhost:9090,你应该会看到页面。