網站部署流程----藉助寶塔面板、PM2守衛和Nginx
部落格的部署
next.js+egg.js+react hooks搭建個人部落格，gitee地址：...
1.專案結構
前臺：blog，技術棧為Next.js+React Hooks+Antd+Axios
中臺：service,技術棧為Egg.js
後臺：admin,技術棧為React腳手架+React Hooks + Antd+Axios
2.部署前準備
首先阿里雲購買ECS伺服器(推薦白嫖甲骨文的伺服器）。
這裡選擇CentOS。
這裡推薦安裝寶塔Linux面板。
在命令列中輸入：yum install -y wget && wget -O install.sh
打開面板之後 下載MySQL，PM2，Nginx（在軟體商店下載）記得把資料庫上傳上去（有很多方法都可以）。
3.專案部署
3.1 blog
首先上傳程式碼（上傳除了node_modules以外的所有檔案）我這裡是使用寶塔直接上傳的，更改程式碼中的請求(urlapi)路徑(如我這裡修改為：82.156.24.229:7001/default/)，改為正式的伺服器地址
修改package.json使其執行在相應的埠下（使用埠的時候記得在阿里的安全組裡開放相應的埠,寶塔安全介面也要放行
"scripts": {
"dev": " next dev ",
"build": "next build",
"start": "next start -p 7002"
#這裡寫想要執行的埠我這裡以7002為例
}
切換到blog資料夾下
#下載相應的包
npm stall
#打包
npm run build
#使用PM2開啟並守護前臺
pm2 start npm -- run start
nginx配置
在nginx/conf下建立一個名為conf.d的資料夾，在資料夾內建立一個blog.conf檔案
server{ #將部落格的前臺放在80埠下 listen 80; #填寫伺服器地址 server_name 82.156.229.83; location /{ proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forward-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-Nginx-Proxy true; proxy_pass http://127.0.0.1:7002; # 通過proxy_pass跳轉至next服務地址 proxy_redirect off; }
在nginx/conf/nginx.conf中新增（這裡填自己剛剛新增的檔案的地址）
include /www/server/nginx/conf/conf.d/*.conf;
重新啟動nginx
nginx -s reload
3.2 service
首先上傳程式碼（上傳除了node_modules以外的所有檔案）我這裡是使用寶塔直接上傳的，然後修改開發環境裡面的跨域設定，將egg-cors中的白名單裡面的網址替換為
http://82.156.24.229:7001
http://82.156.24.229:7002
http://82.156.24.229
下載egg
npm i egg-init -g
因為egg自帶pm2守護，所以可以直接使用npm start 來啟動服務，npm stop來關閉服務。
3.3 admin
在本地輸入打包
npm run build
把build資料夾下所有的檔案上傳到伺服器，修改程式碼中的請求地址，因為後面要在nginx中解決跨域問題，所以我這裡修改請求(urlapi)地址為本埠：82.156.24.229:xx/admin/
nginx配置
在nginx/conf下建立一個名為conf.d的資料夾，在資料夾內建立一個admin.conf檔案
server{
listen xx;
server_name 82.156.24.229;
location / {
#這裡的地址是剛剛上傳的build資料夾的地址
root /www/wwwroot/admin/build;
index index.html index.html;
try_files $uri /index.html;
}
#解決跨域問題
location /admin {
if ($request_method = 'OPTIONS') {
return 200;
}
proxy_set_header Host $host;
#這裡是後臺專案的地址
proxy_pass http://127.0.0.1:7001/admin;
}
}
之前已經引入過 了
重啟nginx
nginx -s reload
4.在nginx中配置跨域
在nginx/conf/nginx.conf中新增cors跨域,找到serve選項，先將其中的listen埠從888改為80，再在其中新增：
location / {
add_header Access-Control-Allow-Origin 'http://82.156.24.229';
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header Access-Control-Max-Age 1728000;
add_header Content-Type 'text/plain; charset=utf-8';
add_header Content-Length 0;
return 204;
}
具體解釋如下：
-
Access-Control-Allow-Origin,用“*”代表允許所有，我實際使用並不成功，查資料知道若需要cookie請求必須用具體的域名；
-
Access-Control-Allow-Credentials，為 true 的時候指請求時可帶上Cookie，自己按情況配置吧；
-
Access-Control-Allow-Methods，OPTIONS一定要有的，另外一般也就GET和POST，如果你有其它的也可加進去；
-
Access-Control-Allow-Headers，這個要注意，裡面一定要包含自定義的http頭欄位（就是說前端請求介面時，如果在http頭裡加了自定義的欄位，這裡配置一定要寫上相應的欄位），從上面可看到我寫的比較長，我在網上搜索一些常用的寫進去了，裡面有“web-token”和“app-token”，這個是我專案裡前端請求時設定的，所以我在這裡要寫上；
-
Access-Control-Expose-Headers，可不設定，看網上大致意思是預設只能獲返回頭的6個基本欄位，要獲取其它額外的，先在這設定才能獲取它；
-
語句“ if ($request_method = 'OPTIONS') { ”，因為瀏覽器判斷是否允許跨域時會先往後端發一個 options 請求，然後根據返回的結果判斷是否允許跨域請求，所以這裡單獨判斷這個請求，然後直接返回；
這裡給出所有配置檔案內容以供參考
user www www;
worker_processes auto;
error_log /www/wwwlogs/nginx_error.log crit;
pid /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;
events
{
use epoll;
worker_connections 51200;
multi_accept on;
}
http
{
include mime.types;
#include luawaf.conf;
include proxy.conf;
default_type application/octet-stream;
server_names_hash_bucket_size 512;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
client_max_body_size 50m;
sendfile on;
tcp_nopush on;
keepalive_timeout 120;
tcp_nodelay on;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
fastcgi_buffer_size 64k;
fastcgi_buffers 4 64k;
fastcgi_busy_buffers_size 128k;
fastcgi_temp_file_write_size 256k;
fastcgi_intercept_errors on;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\.";
limit_conn_zone $binary_remote_addr zone=perip:10m;
limit_conn_zone $server_name zone=perserver:10m;
server_tokens off;
access_log off;
server
{
listen 80;
server_name phpmyadmin;
index index.html index.htm index.php;
root /www/server/phpmyadmin;
location ~ /tmp/ {
return 403;
}
#error_page 404 /404.html;
include enable-php.conf;
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
location / {
add_header Access-Control-Allow-Origin 'http://82.156.24.229';
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header Access-Control-Max-Age 1728000;
add_header Content-Type 'text/plain; charset=utf-8';
add_header Content-Length 0;
return 204;
}
}
location ~ .*\.(js|css)?$
{
expires 12h;
}
location ~ /\.
{
deny all;
}
access_log /www/wwwlogs/access.log;
}
include /www/server/panel/vhost/nginx/*.conf;
include /www/server/nginx/conf/conf.d/*.conf;
}
5.總結
- 服務端設定響應頭 'Access-Control-Allow-Credentials': true
2.服務端響應頭 'Access-Control-Allow-Origin' 不可設定為 ''
使用CORS方法解決跨域，如果設定了"Access-Control-All-Origin","" 那麼不允許攜帶cookie（為了保證安全性） 在本地執行時，由於前後臺沒有同時執行，且執行埠一致，所以直接在CORS中設定了具體的請求地址（這裡就允許攜帶cookie） 部署之後，需要同時執行前後臺專案（給它們設定不同的埠），所以這裡使用了nginx反向代理解決跨域問題