vite项目打成镜像

案例一

• vite项目打包后部署
• 首先参考这篇博客的案例3将vite项目打包后上传到Linux服务器，使用nginx部署
• vite项目打包后本地访问打包文件显示空白，只有放到服务器才能访问
• 部署后测试
  

案例二

• vite项目打成镜像
• 参考
• Linux服务器上安装docker
• Linux服务器安装git

sudo yum install git
git --version
 

• Linux安装node

1. wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz         # 下载node压缩包，在哪条路径下执行该命令，就会下载到哪条路径下
2. tar -xvf node-v12.16.1-linux-x64.tar.gz          # 将压缩包剪切到/usr/local/bin/路径下，并解压
3. mv node-v12.16.1-linux-x64 NodeJs          # 修改文件夹名称为NodeJs
4. yum install gcc gcc-c++            # 安装gcc
5. 在/usr/local/bindeJs/bin路径下有三个文件：node  npm  npx
6. ln -s /usr/local/NodeJs/bin/node /usr/bin/node         # 为这三个文件设置软连接，/usr/bin目录用于存放系统命令，此时在任意路径下执行：node  相当于是执行/usr/local/bindeJs/bin/node路径下的文件，执行node后会进入node环境
7. ln -s /usr/local/NodeJs/bin/npm /usr/bin/npm          # 设置软连接
8. ln -s /usr/local/NodeJs/bin/npx /usr/bin/npx         # 设置软连接
 

• 将前端项目克隆到本地

git clone https://gitee.com/chnq/docker_dev.git
 

• 进入项目根路径，创建文件default.conf

touch default.conf
 

• 编写default.conf

server {
    listen       80;
    server_name  localhost;     # 可以修改为docker服务宿主机的ip
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
 

• 项目根路径下创建Dockerfile

touch Dockerfile
 

• 编写Dockerfile

# 该镜像是基于nginx:latest镜像构建的
FROM nginx
 
# 添加说明
MAINTAINER author: xxxx
 
# 删除目录下的default.conf文件
RUN rm /etc/nginx/conf.d/default.conf
 
# 将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置
ADD default.conf /etc/nginx/conf.d/
 
# 将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下
COPY dist/ /usr/share/nginx/html/
 

• 在项目的根路径下打包

npm install
npm run build

• 在项目根路径下执行docker命令构建镜像

# -t指定镜像名vite2
docker build -t vite2 . 
 

• 使用该镜像创建容器

docker run -d -p 3000:80 --name vite-demo vite2
 

• 启动镜像后测试