博客的部署
next.js+egg.js+react hooks搭建個人博客，gitee地址：https://gitee.com/troyluce/reactblog
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 http://download.bt.cn/install/install_6.0.sh && sh 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反向代理解決跨域問題