一、打包vue项目
在开发完的vue项目执行命令打包生成dist文件夹
二、linux服务器准备打镜像环境
- 执行命令mkdir 创建基础目录(目录位置个人选择,无关紧要)
/usr/local/src/dockerFile/vueDocker
- 将打包好的dist文件夹上传到vueDocker目录下,并且在同级目录下创建Dockerfile文件
- 执行命令vi编辑 Dockerfile镜像内容
#基于nginx镜像
FROM nginx
#将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
#用本地的 nginx.conf 配置来替换nginx镜像里的默认配置
COPY nginx/nginx.conf /etc/nginx/nginx.conf
基于nginx镜像创建vue项目镜像,如果本机docker中没有nginx镜像,docker会自动拉取nginx镜像 ,也可以自行拉取nginx镜像 docker pull nginx
- 同级目录下创建nginx的配置文件
server {
listen 8099;
server_name localhost;
#charset koi8-r;
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 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
nginx配置文件需要配置完整,一旦打镜像完毕后再次修改则需要重新打镜像,
location中root指向路径需要是dist文件复制到nginx的html目录。
如果nginx.conf中需要通过指定代理方式proxy_pass,此时的代理地址需要是外网地址形式。即本机8099端口代理本机指端口
三、基于该Dockerfile构建vue应用镜像
- 运行如下命令,注意不要少了最后的“ . ”
docker build -t vue-docker:v1.0 .
- 查看镜像文件
docker images
- 启动容器
docker run --name vue -d -p 8099:8099 vue-docker:v1.0
访问宿主机ip+8099 即可访问成功。