在腾讯云服务器上搭建个人网站

bobo就浙
247 阅读3分钟

购买一个云服务器

有学生优惠的话还是挺便宜的，我买的时候一台轻量应用服务器一年 108，加 8 块还能注册一个域名。实名认证后购买，备案。域名也要实名认证和备案，域名实名认证后 72 小时才能备案。

域名解析，开放端口

在域名解析网页添加自己购买的一级域名，点击进入添加记录，记录值填服务器的公网 ip。

image.png

image.png

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

image.png

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

我购买的服务器是 linux 系统，作为一个搞前端的，linux 系统的操作命令也不太熟，所以安装了一个宝塔面板，在购买服务器时一般可以选择带有宝塔应用镜像的服务器，这时服务器页面的镜像信息你会有宝塔面板的应用信息，如果没有，可以选择重置应用，然后选择安装宝塔面板，或者自己通过 linux 指令安装。

image.png

image.png

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

image.png

后端服务

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

image.png

在首页，点 PM2 管理器，添加项目，启动文件选刚才自己的文件夹下的入口程序文件，确认，后端服务就在云服务器上跑起来了，记得把后端服务监听的端口开放出来。

image.png

image.png

前端服务

首先也是把代码弄到服务器上，我的前端项目是 React 框架的，本地运行 npm run build 后将打包好的 build 文件夹传上来即可，打包之前将 package.json 文件中添加一句 "homepage":"."，否则可能会报错。

image.png

点击网站，添加站点，域名填自己备过案的域名或者自己服务器公网 ip:端口号，根目录选择你前端代码的存放目录，确认，一个基本的前端服务就部署好了，可以通过刚才填的域名或者 ip 访问到自己的页面啦。

image.png

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

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

image.png

解决方法：

点击你刚才添加的站点，在配置文件中添加这样一句：

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

image.png

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

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

app.use(createProxyMiddleware('/api',{
    target: 'http://*.***.***.***:5000',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      '^/api':'',
    }
}))

打包后使用 Nginx 部署前端服务后，在配置文件中添加这样一句，就能实现同样的功能了：

location ^~ /api/ {
  proxy_pass   http://*.***.***.***:5000/;
}
avatar
文章
阅读
粉丝