前台：blog，技术栈为Next.js+React Hooks+Antd+Axios
中台：service,技术栈为Egg.js
后台：admin,技术栈为React脚手架+React Hooks + Antd+Axios
首先阿里云购买ECS服务器(推荐白嫖甲骨文的服务器）。
这里选择CentOS。
这里推荐安装宝塔Linux面板。
打开面板之后 下载MySQL，PM2，Nginx（在软件商店下载）记得把数据库上传上去（有很多方法都可以）。
首先上传代码（上传除了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 首先上传代码（上传除了node_modules以外的所有文件）我这里是使用宝塔直接上传的，然后修改开发环境里面的跨域设置，将egg-cors中的白名单里面的网址替换为
下载egg
npm i egg-init -g
因为egg自带pm2守护，所以可以直接使用npm start 来启动服务，npm stop来关闭服务。
在本地输入打包
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
在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; } 具体解释如下：
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; } 原文链接：https://www.cnblogs.com/guibi/p/15573961.html
