博客的部署

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

具体解释如下：

1. Access-Control-Allow-Origin,用“*”代表允许所有，我实际使用并不成功，查资料知道若需要cookie请求必须用具体的域名；

2. Access-Control-Allow-Credentials，为 true 的时候指请求时可带上Cookie，自己按情况配置吧；

3. Access-Control-Allow-Methods，OPTIONS一定要有的，另外一般也就GET和POST，如果你有其它的也可加进去；

4. Access-Control-Allow-Headers，这个要注意，里面一定要包含自定义的http头字段（就是说前端请求接口时，如果在http头里加了自定义的字段，这里配置一定要写上相应的字段），从上面可看到我写的比较长，我在网上搜索一些常用的写进去了，里面有“web-token”和“app-token”，这个是我项目里前端请求时设置的，所以我在这里要写上；

5. Access-Control-Expose-Headers，可不设置，看网上大致意思是默认只能获返回头的6个基本字段，要获取其它额外的，先在这设置才能获取它；

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.总结

1. 服务端设置响应头 'Access-Control-Allow-Credentials': true
   2.服务端响应头 'Access-Control-Allow-Origin' 不可设置为 ''
   使用CORS方法解决跨域，如果设置了"Access-Control-All-Origin","" 那么不允许携带cookie（为了保证安全性） 在本地运行时，由于前后台没有同时运行，且运行端口一致，所以直接在CORS中设置了具体的请求地址（这里就允许携带cookie） 部署之后，需要同时运行前后台项目（给它们设置不同的端口），所以这里使用了nginx反向代理解决跨域问题