VUE的docker配置

一、目的

配置好docker文件，可以一条命令启动前端容器。

二、文件配置

.gitignore文件

只需要将dist从文件内删除即可。
目的就是上传git的时候，将dist文件夹内的文件一块上传git仓库

nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/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;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
    server{
        listen  8000;
        server_name     localhost;
        # root后面就是dist文件夹存放的位置
        root    /usr/local/vue/dist;
        location / {
                try_files $uri $uri/ @router;
                index index.html index.htm;
        }
        location @router {
                rewrite ^.*$ /index.html last;
        }
        # 这里是跨域配置，只要是/proxy/开头的，都会转发，关键字随便定义
        location /proxy/ {
                proxy_pass      http://114.114.114.114:8000/;
        }
    }
}

nginx-dockerfile

FROM nginx:last

COPY dist/ /usr/local/vue/dist/
COPY nginx.conf /etc/nginx/nginx.conf

docker-compose.yml

version: '2'
services:
  docker-demo:  # 指定服务名称
    build:  
      dockerfile: ./nginx-dockerfile    # 指定 dockerfile 所在路径
    ports:    # 指定端口映射,前面是宿主机端口，后面是容器端口
      - "8000:8000"

这些文件在目录中都是同级的

三、剩下的东西

在前端服务器上安装docker，docker-compose，然后启动一个web服务器就行了。
下一篇文章再说