胖哥的博客项目部署

第一次部署博客

我的博客

一、项目结构

1. 前台:技术栈为Next.js+React Hooks+Antd+Axios
2. 中台:技术栈为Egg.js
3. 后台:技术栈为React脚手架+React Hooks + Antd+Axios

---

二、项目部署的准备

1. 服务器:我用的是阿里云ESC服务器(去年双十一买的),选择CentOS系统
2. 服务器管理:我用的是宝塔Linux面板(具体安装百度就可以,很简单,小破站也有教程,这里不是咋们的重点)
3. 安装之后需要下载PM2,MySQL,Nginx(宝塔面板里面有可视化下载工具,同时也可以再宝塔终端用命令行下载)
   4.将本地数据库上传至宝塔的数据库中, PS:数据库名称与密码的一致

---

三、前台部署

1. 先在本地将前台的代码里面的node_modules与.next文件夹删除

2. 将剩余文件压缩zip格式

3. 我这里使用的是域名,将解析后的域名在宝塔添加站点,添加的时候要选择纯静态文件,之后打开添加站点后生成的文件夹,将文件夹里面所有的东西都删除.点击上传,将打包好的文件上传,解压这里解压后的文件在一个文件夹中,你需要选择文件家中的所有文件,剪切出来,放在创建好的站点下,也就是与压缩包同级,或者你可以点网站,选择访问目录,将其跟改为你解压出来的文件夹

4. 执行完这些之后,你需下载依赖并配置
   前台默认端口为3000,我这里使用的时3002,你只需要修改package.json使其运行在相应的端口下（使用端口的时候记得在阿里的安全组里开放相应的端口,同时检查宝塔的安全是否放行了此端口）

"scripts": {
    "dev": "  next dev ",
    "build": "next build",
    "start": "next start -p 3002" 
    #这里写想要运行的端口
}

#下载依赖 
    npm install
     #打包
    yarn build  
     #使用pm2管理工具守护项目  
    pm2 start npm --name "my-blog" -- run start

5. nginx配置
   打开宝塔面板,找到网页,找到对应站点,点击设置,配置文件,将里面对应下面的配置改为我的,其他的配置不要删

server
{
    listen 80;
    server_name catblog.maji666.cn;
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:3002;  # 通过proxy_pass跳转至next服务地址
      proxy_redirect off;
    }
    location ~ .*\.(js|css)$ {
       proxy_pass http://127.0.0.1:3002;
      }
}

---

四、中台部署

1. 上传代码(我这里又解析了一个域名):
   上传除了node_modules以外的所有文件,和前台上传方式一样,然后注释config.default.js里面的跨域设置origin,后面咋们会配置的
2. 之后再对应的文件夹下下载Egg

npm i egg-init -g

3. 因为Egg自带pm2守护进程,所有我们之间在终端执行以下命令

npm start #开启命令(开启egg,开启之后不要执行关闭命令,不然给有把egg给关了)
npm stop # 关闭命令(关闭egg)

4. nginx配置(与上面的操作步骤一样)

server
{
   listen 80;
   server_name 我解析的中台用的域名;
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:7001;  # 通过proxy_pass跳转至next服务地址
     proxy_redirect off;
   }
}

五、后台部署

1. 上传代码(我这里有解析了一个域名):
   后台是静态部署,所以我们现在本地执行yarn build,将文件打包在build文件夹下,之后将build文件夹压缩,并上传至宝塔,
   2.nginx配置(与上面的操作步骤一样)

server
{
    listen 80;
    server_name 我解析的后台用的域名;
    #解决跨域问题
     location /admin {
        if ($request_method = 'OPTIONS') {
            return 200;
      }
        proxy_set_header Host $host;
        #这里是后台项目的地址
        proxy_pass http://127.0.0.1:7001/admin;   
     }
}

六、下载地址

下载地址