Docker部署前端项目

项目结构

1. 配置nginx.conf

server {

    listen 80;
    listen [::]:80;

    access_log /var/log/nginx/host.access.log main;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;

        # 解决部分前端框架的路由问题，在浏览器刷新报错404
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;

    location = /50x.html {
        root /usr/share/nginx/html;
    }

}

2. 配置Dockerfile

# 第一阶段：node镜像打包
FROM node:latest as build
# WORKDIR /app web项目目录
COPY . .
RUN npm install
RUN npm run build

# 第二阶段：nginx打包
FROM nginx:1.25.3-alpine
EXPOSE 80

# 替换nginx配置
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf

# 将第一阶段的静态文件复制到nginx中
RUN rm -rf /usr/share/nginx/html
RUN mkdir /usr/share/nginx/html
COPY --from=build /dist /usr/share/nginx/html

# 运行
CMD ["nginx", "-g", "daemon off;"]

3.构建Docker image

docker build -t my-app:dev .

4.运行容器

4.1基于my-app运行容器

docker run -itd --name myApp -p 6261:80 my-app

4.2基于docker-compose.yml运行容器

• 新建docker-compose.yml

version: '3.7'

services:
	my-app:
		image: my-app:dev 
		container_name: my-app
		ports:
		- '6261:80'

• 运行docker-compose up -d

5.访问6261端口