【部署网站】如何将 Next.js & egg.js & react 三种网页部署到服务器上

heheer
611 阅读6分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

本文主要内容：总结了我自己部署博客过程中，遇到的一些问题以及解决方法。

写了一个多星期的博客终于在今天部署到了服务器上，虽然听说熟练的人五分钟就能完成这个过程，但是我确是实实在在地折腾了好几个小时，所以特地写一篇文章来记录一下，防止之后遇到同样的问题手足无措。

买服务器和域名

在写好了本地的项目，并且项目能够在本地顺利运行后，这才到了部署这一步。

而部署实际上也并不一定要买服务器，vercel、github page 等都是免费的好选择 （免费的就是好的）

不过我这里选择的是直接买了服务器，因为现在阿里云做的活动，新客买一年服务器+域名只要50块钱，好像少吃点零食还是省下来了。

image.png

image.png

个人小白的博客刚开始的配置不用太高，选最低的就够了，没几个人同时看的时候还是很流畅的。镜像的选择也可以随意一点，后面改起来挺方便的，不过我直接选择了Centos 7.6

域名的选择也是看自己喜欢和看自己钱包的厚度，（不过据说.com域名更容易被搜到

配置服务器

付款结束后就能对服务器进行操作了

这里要用到一个很好用的服务器运维软件——宝塔

远程连接服务器后，按照宝塔官方给出的命令进行安装

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

安装完成后键入bt，就能出现如下菜单

image.png

我用到的几项如下

  • 5 修改密码
  • 6 修改用户名
  • 14 查看面板信息

所以这里键入14，就能看到下面的信息

image.png

复制外网面板地址到浏览器地址栏进行访问即可

这里我一开始遇到了无法访问宝塔面板地址的情况

需要按照提示放行面板端口，进入账户下的控制台，选中自己的服务器，然后找到安全或者类似的一栏，在防火墙中添加规则，比如这里直接输入 8888

image.png

接着通过 宝塔面板-软件商店 安装三个需要的软件: Nginx、Mysql、pm2

image.png image.png

根据配置不同可能需要的时间也不同，这里我的PM2装了二十几分钟

这样我们就完成了服务器的基本配置

配置前台-Next页面

我的博客是跟着技术胖的视频写的，自己略加了修改，具体可以看我的GitHub中开源了代码

博客的前台框架是Next.js，它需要根据 npm script 来运行，所以下面来讲一下我的部署过程

第一步

在宝塔面板下 网站-添加站点，

image.png

这里的域名填写可以是你买的域名，也可以是你的服务器的公网ip（也就是宝塔面板左上角那个）。因为我的域名还没有备案，所以就将两种都写了上去，在备案完成前能直接用ip进行访问

image.png

注意这里的端口也是要像前面那样在阿里云服务器账户下开放的

第二步

将我们的项目文件传到服务器上，进入下面的根目录/www/wwwroot/heheer.top

image.png

删除里面所有文件，可能会有一个文件剩下来删不掉，不过那并不重要。

然后点击左上角上传我们的项目文件，将除了 .next 和 node_modules 之外的文件和文件夹打包上传

image.png

双击解压后进入文件夹，点击上面的终端按钮打开终端

（我这里用Xshell进行了远程连接，效果都是一样的）

image.png

确保是在blog目录下执行 npm install 的命令

这里遇到了安装pm2后无法执行npm的情况，愣头青的我直接删除了安装了1453秒的pm2，重新安装了一遍，试图用愚蠢的操作唤醒npm

image.png

然而重装并没有带来任何变化，在乱操作无果后，注意到pm2的说明中内置nodejs

所以在软件商店中选中PM2管理器，点击设置

image.png

这里一开始是没有默认node版本的，选上后才能拥有node

这样在 npm install 执行结束后我们就算还原了电脑本地的项目了

第三步

运行项目，与在本地用 npm run dev 进行调试不同，这里要通过 npm script来运行

执行命令npm run build，

image.png

然后执行pm2 start npm --name "blog" -- run start守护进程，防止关闭终端后就不再运行了

可以使用pm2 list查看目前守护的项目

image.png

第四步

添加配置文件，回到网站页，点击网站名，然后添加如下配置

image.png

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:3000;
  proxy_redirect off;
}

location ~ .*\.(js|css)$ {
  proxy_pass http://127.0.0.1:3000;
}

这里要注意把这段配置内容放在前面一点，我放在最后就会导致CSS样式的丢失，而放在最前就能正常渲染CSS样式，其中原理等之后弄清楚了来补充

所以这样我们就完成了前台的配置，而这也是最复杂的，之后两个就会简单很多

配置中台-egg页面

第一步类似，换一个端口即可

第二步上传文件后，先执行命令npm i egg-init -g安装egg.js，再执行npm install安装依赖

第三步执行npm start运行，由于egg自带进程守卫，所以无需pm2来守护进程

不过在这一步可能会有报错的情况，检查一下是不是数据库没有打开，在宝塔面板配置和本地一样的数据可即可

image.png

第四步同样要添加配置文件，添加内容如下

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

配置后台-react页面

由于后台是个静态网页，所以直接上传在本地build后产生的文件夹即可

第一步也类似，再换一个端口并开放即可

第二步要先在本地执行npm run build生成build文件夹，然后打包build文件夹上传

第三步解压后即可点击域名进行访问

image.png

这里注意一点，前面的也要注意，如果是像我这样域名文件夹并不是项目文件的根目录，要回到网站页点击域名修改网站的运行目录

image.png

这样我们就成功将网站部署到了服务器上。

小结

过程中还因为昨天为了抓包配置的环境变量造成了不小的困扰，总之虽然过程曲折也算将网站部署到了服务器上，如果熟练的话应该确实五分钟就够了。

概况来说就是创建站点，上传文件，运行这三步，其中的细节再进行调整即可

放一个GitHub链接，会持续更新，欢迎star

至于博客链接等备案完成了再来更新

avatar
文章
阅读
粉丝