Vite项目使用docker部署

1.修改生产环境配置

修改生产环境的配置，可以在项目中使用 import.meta.env.PROD import.meta.env.VITE_API_PREFIX判断当前环境使用什么配置。使用npm run build构建的项目在nginx运行时使用的url就是生产环境的url

image-20240705135010970

image-20240705135250808

2.构建项目

在项目根目录打开命令行，执行命令npm run build构建项目，构建完成后会生成dist目录

image-20240705150033939

image-20240705150140156

3.使用nginx运行测试

系统中首先要有一个nginx，此处不做介绍。将生成的dist文件夹放入html目录下，放置的位置可以在conf/nginx.conf中进行修改。

image-20240705151050335

在nginx的根目录打开cmd运行命令start nginx.exe启动nginx，在浏览器访问http://127.0.0.1:8080/，能进入就是成功的

image-20240705151739681

image-20240705151454641

4.编写Dockerfile文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 使用轻量级的 Nginx 基础镜像
FROM nginx:alpine

#只要不把文件放到需要root权限才能访问的目录，就可以不执行这条语句，ubuntu系统特别注意
RUN chmod -R 755 /usr/share/nginx/html

# 设置工作目录为 Nginx 的默认静态文件目录
WORKDIR /usr/share/nginx/html

# 移除默认的 Nginx 静态文件
RUN rm -rf ./*

# 将本地的 dist 目录内容复制到工作目录
COPY dist .

#只要不把文件放到需要root权限才能访问的目录，就可以不执行这条语句，ubuntu系统特别注意
RUN chmod -R 755 /usr/share/nginx/html

# 暴露 Nginx 默认的 80 端口
EXPOSE 80

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

5.上传文件夹到linux

将存放dist文件夹和Dockerfile的文件夹上传到linux服务器，要放到不需要root权限的文件夹中，否则在浏览器访问的时候会权限不足

image-20240705152427099

image-20240705152443447

进入文件夹看是否需要权限，如果使用普通用户身份登录需要权限则需要更换文件夹存放

image-20240705152721219

6.打包镜像&运行容器

根据项目的不同修改下面的命令

1
2
3
4
5
6
7
8
#在上传的文件夹的Dockerfile文件的目录下执行下面的命令进行打包，不是ubuntu可以去掉sudo 
# -t 给镜像设置一个标签（名称）    	.指定了构建上下文，表示使用当前目录的内容构建镜像
sudo docker build -t oj-frontend .
 

#在上传的文件夹的Dockerfile文件的目录下执行下面的命令运行一个新的容器，不是ubuntu可以去掉sudo 
# -d 表示容器在后台运行，不会阻塞当前终端  --name 为容器指定一个名称  -p 8102:80 表示将宿主机的8102端口映射到容器的80端口   oj-frontend 表示用来创建容器的镜像名
sudo  docker run -d --name oj-frontend -p 8102:80 oj-frontend

image-20240705132835902

image-20240705132859064

7.开放防火墙&检查运行是否成功

到容器中查看是否启动成功

image-20240705134104851

1.在防火墙中开放刚开启的端口，因为我的防火墙关闭了，无须开放

2.在云服务商平台也要开启端口

image-20240705133858749

在浏览器访问，有数据显示就是部署成功了

image-20240705134341897