Vite项目使用docker部署

Aixbox2024-07-062024-07-20

1.修改生产环境配置

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

2.构建项目

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

3.使用nginx运行测试

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

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

4.编写Dockerfile文件

# 使用轻量级的 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权限的文件夹中，否则在浏览器访问的时候会权限不足

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

6.打包镜像&运行容器

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

#在上传的文件夹的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