docker+nginx部署前端vue/react项目流程

1.安装docker，nginx

2.在项目的根目录下创建一个名为Dockerfile的文件，用于构建Docker镜像。

# 使用node镜像作为基础镜像
FROM node:14 as build

# 设置工作目录
WORKDIR /app

# 复制项目文件到工作目录
COPY . .

# 安装依赖
RUN npm install

# 构建项目
RUN npm run build

# 使用nginx镜像作为基础镜像
FROM nginx:alpine

#命令的意思是将 Nginx复制到 /usr/local/etc/nginx/nginx.conf
COPY nginx.conf /usr/local/etc/nginx/nginx.conf

# 复制构建好的项目文件到nginx的默认站点
COPY --from=build /app/dist /usr/share/nginx/html

# 暴露端口
EXPOSE 80

# 启动nginx服务
CMD ["nginx", "-g", "daemon off;"]

3.在项目的根目录下创建一个名为nginx.conf的文件，用于存放nginx的配置

server {
    listen 80; # 更改为你想要的端口号
    server_name localhost;
 
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

在项目根目录创建.dockerignore 用于排除文件

node_modules
.dockerignore
Dockerfile
README.md

4.构建Docker镜像 docker build -t vue-app .

如图： 可以看到已经创建成功了，可以打开安装的docker查看，也可以用命令行查看是否创建成功

docker images

5.运行docker容器

docker run -d -p 8091:80 vue-app

6.浏览器输入http://localhost:8091/