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; }