docker nginx运行vue编译后的项目

前言

最近公司有个vue的项目,需要本地使用nginx启动运行,我觉得使用docker正适合,所以记录下来分享给大家

准备工作

docker安装nginx镜像

docker pull nginx

编译vue项目

查看vue项目package.json

"scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",
    
    "lint": "vue-cli-service lint"

},

然后使用如下命令编译到dist文件夹下

npm run build

编译之后会生成到dist文件夹下,这里我们会遇到一个问题,先我们查看vue.config.js文件

module.exports = {

    publicPath: '/mvue',

    runtimeCompiler: true,

这里我们可以看到,publicPath:’/mvue’,意思就是说生成的index.html文件会以/mvue为目录,如下所示 :













   x7-manage













































注意这点,我们应该就知道了,所以我们新建一个/mvue目录,然后把生成的/dist文件全部复制到/mvue里面,目录结构如下所示 :
image.png

这样就完成了vue项目的编译工作

配置nginx

根目录下创建/nginx目录,并新增nginx.conf文件,如下所示 :

user  root;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html;
    }

    location /mvue {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /mvue/index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

其中,注意location / 和 location /mvue的写法,因为我们创建了/mvue目录,因此,我们在location /mvue中指定了index.html的绝对路径:

try_files $uri $uri/ /mvue/index.html;

这样就完成了nginx.conf的配置

docker 运行 vue项目

上面的两步操作:

1、生成/dist(包含/mvue)目录,
2、配置nginx.conf都已经完成了,接下来我们就使用docker 来运行,如下所示:

docker run --name yourname -p 8080:80 -v $PWD/dist:/usr/share/nginx/html:rw -v $PWD/nginx/nginx.conf:/etc/nginx/nginx.conf -v $PWD/nginx/logs:/var/log/nginx -d nginx

点击回车即可生成一个container,然后我们可以浏览器中成功预览,至此就完成了全部工作。

总结

1、当然你可以使用docker来生成镜像来运行也是可以的,不过每次都生成镜像浪费时间,使用这种方式在不安装nginx的情况下运行vue项目,非常方便,极力推荐给大家

2、因为vue.config.js使用了publicPath: '/mvue’,所以要自己在dist中创建一个这个目录,否则使用docker run运行起来就会报404或500的错,这个千万注意

引用

vue-docker-nginx

nginx中部署多vue项目

你可能感兴趣的