一、拉取nginx镜像
docker pull nginx //先拉取nginx镜像
二、打包前端项目
1、将Vue打包项目传输到/usr/local/vue/下blog和admin文件夹下
2、在/usr/local/nginx下创建nginx.conf文件，格式如下：
events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;client_max_body_size 50m;client_body_buffer_size 10m; client_header_timeout 1m;client_body_timeout 1m;gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 4;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;gzip_vary on;server {listen 80;server_name 前台域名;location / { root /usr/local/vue/blog;index index.html index.htm; try_files $uri $uri/ /index.html; }location ^~ /api/ { proxy_pass http://你的ip:3300/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}server {listen 80;server_name 后台子域名;location / { root /usr/local/vue/admin;index index.html index.htm; try_files $uri $uri/ /index.html; }location ^~ /api/ { proxy_pass http://你的ip:3300/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}server {listen 80;server_name websocket子域名;location / {proxy_pass http://你的ip:3300/websocket;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";proxy_set_header Host $host:$server_port;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}}server {listen 80;server_name 上传文件子域名;location / { root /usr/local/upload; } }}三、运行启动nginx容器
docker run --name nginx --restart=always -p 80:80 -d -v /usr/local/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/vue:/usr/local/vue nginx
这样前端项目就已经部署完毕。访问自己的域名即可查看自己部署的项目。
)
