Vue Build

2024年07月09日

柏拉文

越努力，越幸运

一、认识

---

二、目录

---

|- 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，你应该会看到页面。