vue打包
npm run build
dist src文件夹及index.html打包到服务器
获取nginx镜像
docker pull nginx
配置nginx
项目根目录创建nginx文件夹,并创建并编辑default.conf文件
mkdir nginx
cd nginx
vim default.conf
default.conf文件内容
server{
listen 80;
server_name test;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
error_page 500 501 /50x.html;
location / {
root /usr/share/nginx/html;
}
}
创建DockerFile文件
项目根目录创建Dockerfile
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
创建镜像
docker build -t vuetest .
查看镜像
docker images
运行镜像
docker run -p 8080:8080 -d --name vuetest vuetest
优化:
挂载运行
docker run -p 80:80 -d --name vuetest \
-v /home/vuetest/nginx/default.conf:/etc/nginx/conf.d/default.conf \
-v /home/vuetest/dist:/usr/share/nginx/html/ \
--privileged=true -it vuetest
挂载运行后,每次修改,直接更新服务器上vuetest文件夹内容,并重启docker容器即可
docker restart vuetest