vue项目可以打一个dist静态资源包,直接使用Nginx发布即可。

现在由于要上docker,需要将vue项目和nginx打成一个镜像才行。

 

项目结构如下:

./
├── build
│   └── build.js
├── config
│   └── index.js
├── dist
│   ├── index.html
│   └── static
├── index.html
├── package.json
├── README.md
├── src
│   └── App.vue
└── static

 

二、封装docker镜像

这里使用镜像nginx:1.17.8

登录服务器

创建目录

mkdir -p /data/nginx

 

nginx.conf

这个文件是从nginx:1.17.8拷贝出来的,并做了一定的优化,完整内容如下:

user  nginx;
worker_processes  auto;

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

worker_rlimit_nofile 65535;
events {
    use epoll;
    worker_connections  1024;
}


http {
    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;
    tcp_nodelay         on;
    keepalive_timeout   120;
    types_hash_max_size 2048;
    server_names_hash_bucket_size 128;
    client_header_buffer_size  32k;
    client_max_body_size 2048m;
    client_body_buffer_size 128k;
    proxy_connect_timeout 10;
    default_type        application/octet-stream;
    gzip on;
    gzip_min_length 1k;
    gzip_http_version 1.1;
    gzip_buffers     4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
    gzip_vary on;

    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For  $remote_addr;
    proxy_set_header X-Forwarded-Scheme  $scheme;
    proxy_set_header  X-Forwarded-Proto $scheme;
    proxy_send_timeout 90;
    proxy_read_timeout 90;
    proxy_buffer_size 4k;
    proxy_buffers 4 32k;
    proxy_busy_buffers_size 64k;
    proxy_temp_file_write_size 64k;
    proxy_next_upstream error timeout invalid_header http_500 http_502 http_503;
    server_tokens off;

    include             /etc/nginx/mime.types;
    include /etc/nginx/conf.d/*.conf;
}
View Code

相关文章: