vue前端项目打docker镜像基于nginx

一、打包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  即可访问成功。