目录
vue项目根目录中创建nginx配置文件default.conf
vue项目根目录下创建Dockerfile
构建打包vue项目
打包docker镜像
运行
打开 docker可视化工具或者命令行 查看是否打包成功
vue项目根目录中创建nginx配置文件
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;
}
}
vue项目根目录下创建root /usr/share/nginx/html
该目录和下面创建的Dockerfile
中目录要保持一致
Dockerfile
FROM nginx
MAINTAINER 关键词
EXPOSE 80
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/
FROM nginx
打包容器的底层MAINTAINER beizhu
备注信息RUN rm /etc/nginx/conf.d/default.conf
删除目录下的default.conf文件ADD default.conf /etc/nginx/conf.d/
将default.conf复制到/etc/nginx/conf.d/下,用本地的default.conf配置来替换nginx镜像里的默认配置COPY dist/ /usr/share/nginx/html/
将项目根目录下dist文件夹(构建之后才会生成)下的所有文件复制到镜像/usr/share/nginx/html/目录下上一步root地址
构建打包vue项目
npm run build
vue项目目录:
打包docker镜像docker build -t vuenginxapp .
.
表示打包本目录下文件必填
-t
给镜像取名
运行
docker run -d -p 8083:80 --name vuenginxapp vuenginxapp
-d
后台方式启动
-p
端口映射 9090
本地端口 80
docker端口
--name vuenginxap vuenginxapp
给容器起名 vuenginxapp
要运行的镜像名vuenginxapp
docker可视化工具或者命令行
查看是否打包成功
访问 ip:8083 页面若正常显示 则成功。
后续更新jenkins 部署vue项目 到docker
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)