vue+node項目使用nginx部署到docker單機及docker swarm集羣
這裏vue配置文件是使用的動態加載，如果需要可以參考我之前的文章：https://blog.csdn.net/CaptainJava/article/details/103861623
先看一下大概目錄：
1、打包
將項目打包到dist目錄
這裏配置了生產環境需要的配置文件，所以打包命令如下：
npm run build:prod
2、上傳
將打包後的dist目錄，壓縮爲dist.zip文件上傳到服務器準備部署的目錄，以/ceph/erms/uinginx爲例。
並解壓，unzip dist.zip
3、創建Dockerfile
/ceph/erms/uinginx目錄下穿件Dockerfile文件，內容如下：
FROM nginx:latest
# 定義作者
MAINTAINER groot
# 將dist文件中的內容複製到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone
RUN echo 'docker images success!!'
if==================單機版===================
4、創建nginx.conf配置文件
創建配置文件
如果vue項目中配置了代理，部署服務器後需要在nginx下配置代理，
代理配置如：
vue中的：
proxy: {
'/proxyFTRApi': {
target: process.env.VUE_APP_ERMS_FTR,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/proxyFTRApi': ''
}
}
}
}
nginx下替換爲（只填寫proxy_pass 也可以）：
location /proxyFTRApi {
proxy_pass http://10.**.***.221:10012/ermsFTR/api/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
client_max_body_size 0;
proxy_http_version 1.1;
proxy_request_buffering off;
proxy_buffering off;
}
配置規則可以參考：TODO
文件內容如下，
worker_processes auto;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/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 logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
client_max_body_size 20m;
server {
listen 80;
server_name localhost;# 這裏換域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#全文檢索代理
location /proxyFTRApi {
proxy_pass http://10.**.***.221:10012/ermsFTR/api/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
client_max_body_size 0;
proxy_http_version 1.1;
proxy_request_buffering off;
proxy_buffering off;
}
#ecm代理
location /proxyApi {
proxy_pass http://10.**.***.221:10011/api/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
client_max_body_size 0;
proxy_http_version 1.1;
proxy_request_buffering off;
proxy_buffering off;
}
#erms代理
location /proxyErmsApi {
proxy_pass http://10.**.***.221:10004/erms/api/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
client_max_body_size 0;
proxy_http_version 1.1;
proxy_request_buffering off;
proxy_buffering off;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
配置完成後的目錄結構爲
5、創建docker鏡像
在/ceph/erms/uinginx目錄下執行命令生成鏡像。（命令最後有個點）
docker build -t erm/uing .
6、用docker啓動
docker run -p 9528:80 -d --name ermsuing erm/uing
啓動成功後，打開瀏覽器輸入IP:9528即可訪問你到項目。
if==================集羣版===================
4、創建nginx.conf配置文件
創建配置文件
如果vue項目中配置了代理，部署服務器後需要在nginx下配置代理，
與單機版的區別是代理中使用的ip地址都改成了docker swarm集羣中的hostname
代理配置如：
vue中的：
proxy: {
'/proxyFTRApi': {
target: process.env.VUE_APP_ERMS_FTR,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/proxyFTRApi': ''
}
}
}
}
nginx下替換爲（只填寫proxy_pass 也可以）：
location /proxyFTRApi {
proxy_pass http://ermsftr/ermsFTR/api/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
client_max_body_size 0;
proxy_http_version 1.1;
proxy_request_buffering off;
proxy_buffering off;
}
配置規則可以參考：https://www.cnblogs.com/jiuhaoyun/p/10592273.html
文件內容如下，
worker_processes auto;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/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 logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
client_max_body_size 20m;
server {
listen 80;
server_name localhost;# 這裏換域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#全文檢索代理
location /proxyFTRApi {
proxy_pass http://ermsftr/ermsFTR/api/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
client_max_body_size 0;
proxy_http_version 1.1;
proxy_request_buffering off;
proxy_buffering off;
}
#ecm代理
location /proxyECMApi/ {
proxy_pass http://edoc2/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
client_max_body_size 0;
proxy_http_version 1.1;
proxy_request_buffering off;
proxy_buffering off;
}
#erms代理
location /proxyErmsApi {
proxy_pass http://ermscore/erms/api/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
client_max_body_size 0;
proxy_http_version 1.1;
proxy_request_buffering off;
proxy_buffering off;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
配置完成後的目錄結構爲
5、創建docker鏡像
在/ceph/erms/uinginx目錄下執行命令生成鏡像。（命令最後有個點）
docker build -t erm/uing .
6、配置compose文件
我們集羣同意管理compose文件，所以在自己的compose文件目錄下創建compose配置文件docker-webng.yml內容過如下：
其中：macrowing是集羣內的網路，內部之間通過hostname通訊需要依賴。
version: '3.3'
services:
ermsweb:
hostname: ermsweb
image: erm/uing
ports:
- target: 80
published: 10000
mode: host
labels:
"type": "2"
volumes:
- /ceph/erms/uinginx/dist:/usr/share/nginx/html
networks:
- edoc2_default
deploy:
# placement:
# constraints:
# - node.labels.nodetype == InDrive
replicas: 3
restart_policy:
condition: on-failure
volumes:
esdata:
driver: local
networks:
edoc2_default:
external:
name: macrowing
7、部署項目
docker stack deploy -c /ceph/erms/compose/docker-webng.yml erms
docker stack deploy -c //stack啓動命令，固定寫法
/ceph/erms/compose/docker-webng.yml //compose文件
erms //集羣名稱，可以隨意。這裏方便管理同類服務使用一個
啓動後可以進入Portainer查看啓動狀態及日誌
運行成功後，通過集羣域名訪問自己的項目即可。