购买一个云服务器

如果有学生优惠的话还是蛮便宜的。我买的时候轻量级应用服务器一年108块钱，加8块钱就可以注册一个域名。实名认证后购买并备案。域名还需要实名认证备案，实名认证后72小时内才能备案。

域名备案，域名解析，开放端口

在域名解析页面添加自己购买的一级域名，点击进入添加记录，记录值填写服务器的公网ip。需要注意的是，根据国家相关法律要求，如果您使用中国大陆地区的服务器开设网站，或者提供其他类似的网络信息服务，则需要依法备案。

添加域名解析后，在自己的服务器页面-防火墙中添加需要开放的端口号，该端口号将在后续部署的前后端服务中使用。

在服务器上部署前后端服务

我买的服务器是linux系统。作为一名前端操作人员，对linux系统的操作命令不是很熟悉，所以安装了一个宝塔面板。购买服务器时，一般可以选择宝塔应用镜像的服务器。在服务器页面查看图片信息时，就会有宝塔面板的应用信息。如果没有，可以选择重置应用程序，然后选择安装宝塔面板，或者通过linux命令自行安装。

宝塔面板安装完成后，按照官网教程进入面板页面，在软件商店安装你需要的软件。我的个人网站是前后端分离的。后端服务是用Node编写的，所以需要安装PM2，前端服务需要Nginx。它是一个反向代理。

后端服务

首先获取服务器本地代码，点击文件，可以看到服务器上的文件夹。一般我们自己的服务都放在www文件夹下，也可以在根目录下新建一个文件夹。然后通过upload或者git clone的方式将自己的代码上传到服务器。

在主页点击PM2 Manager，添加项目，启动文件，选择刚才自己文件夹下的入口程序文件，确认，后端服务就会运行在云服务器上。记得打开后端服务监听的端口。

前端服务

首先，我把代码放在服务器上。我的前端项目是基于React框架的。本地运行npm run build 后，上传打包的build 文件夹。打包之前，在package.json文件中添加一句话。首页':'.'，否则可能会报错。

点击网站，添加站点，域名填写注册的域名或者你的服务器公网ip:的端口号，选择你前端代码存放的目录为根目录，确认有一个基本的前端服务部署完毕，可以填写刚才的域名或者ip访问自己的页面。

当您打开个人网站页面时，可能会遇到两个问题：

1. 使用 BrowserRouter 的单页应用，一刷新就 404 。

解决方法：

点击刚刚添加的站点，在配置文件中添加这句话：

location/{ try_files $uri $uri//index.html;} Copy

2. 跨域请求的代理失效。

对于本地开发时的跨域请求，一般通过中间件http-proxy-middleware来设置代理转发。比如我的项目中，前端服务运行在3000端口，后端服务运行在5000端口，那么定义将/api开头的请求转发到5000端口：

app.use(createProxyMiddleware('/api',{ target: 'http://*.***.***.***:5000', secure: false, changeOrigin: true, pathRewrite: { '^/api':'', }} )) 复制打包并使用Nginx部署前端服务后，在配置文件中添加这句话即可实现同样的功能：

位置^~ /api/{ proxy_pass http://*.***.***.***:5000/;} 复制