Docker环境运行Vue项目全过程

1. 打包VUE工程

在vue工程根目录下，执行打包命令

npm run build

随后将生成 dist文件夹，里面的内容就是打包后的文件

2. 创建Nginx配置文件

在vue工程根目录下，创建文件 default.conf，内容如下：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
}

3. 创建Dockerfile

在vue工程根目录下，创建文件 Dockerfile，内容如下：

FROM nginx

MAINTAINER fuhb

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

说明

• FROM nginx：该镜像是基于nginx:latest镜像构建的
• MAINTAINER fuhb：添加说明
• RUN rm /etc/nginx/conf.d/default.conf：删除nginx自带的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/目录下

4. 创建镜像

把dist、default.conf、Dockerfile放在同一个目录下，例如 /usr/local/docker/web/

执行如下命令，注意最后有个点

docker build -t my-web .

执行命令docker images，会发现生成了一份名为 my-web的镜像

5. 创建容器

镜像已经有了，下一步就可以创建并运行容器了，执行如下命令

docker run -d --name my_web -p 10002:80 my-web

然后执行 docker ps -a ，会发现容器成功创建并运行了，此时可以通过10002端口号访问VUE站点。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。