从零到一搭建自己的个人域名网站

本文只是简单的前端项目的部署，不涉及后台。
以 github action 为例 （CI/CD）
目前暂定项目为 demo （可自行调整）

环境

node 安装 （注意如果是 mac M1 的。版本固定安装为 14.17.0）

本地创建项目

npx create-react-app demo

github 创建 repository

创建名称为 demo

配置 Github 的公私钥

私钥在本地，公钥可以分配配置在 github上

本地代码提交到 github 上

git init
git add .
git commit -m 'a'
git remote add origin [e-mail]:***/demo.git
git push -u origin master

购买服务器

可以在阿里云、腾讯云等购买云主机（我这购买的是 UCloud 的 ubuntu ）。
记住服务器的 用户名 和 密码 和 外网IP
登录服务器，在 /home/ubuntu目录下 创建目录 demo，用来存放项目。

登录服务器并生成公私钥

进入github demo 目录，点击右上角的设置，选择，secrets。
新建 名称： SSH_PRIVATE_KEY 值：服务器中设置的私钥值。

github 中创建 action

name: Test build and deploy site

on:
  push:
    branches: 
      - master

jobs:
  CI_CD:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2-beta
        with:
          node-version: 14
      - run: npm ci
      - run: npm run-script build

      - uses: wlixcc/SFTP-Deploy-Action@v1.0
        with:  
          username: '***'   #服务器的用户名
          server: '****' #服务器的外网IP
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} #引用之前创建好的secret
          local_path: './build/*'  # 对应我们项目build的文件夹路径
          remote_path: '/home/ubuntu/demo' 我们指定要把代码放置在服务器的什么目录下

服务器中配置 nginx

首先安装 nginx
1.修改nginx 默认端口 /etc/nginx/sites-available 下的default 文件
2.在 /etc/nginx/conf.d 目录下建一个 demo.conf 文件

server {
        listen 80;
        # 项目路径
        root '/home/ubuntu/demo';
        index index.html index.htm;
        location / {
                try_files $uri $uri/ /index.html;
        }
        location ^~ /assets/ {
                gzip_static on;
                expires max;
                add_header Cache-Control public;
        }

        error_page 500 502 503 504 /500.html;
        client_max_body_size 20M;
        keepalive_timeout 10;
}

3.启动 nginx
sudo service nginx start

此时网站可以通过 http://ip：80 地址直接访问

购买域名

可以在阿里云、腾讯云等购买域名
域名购买成功后。在购买的域名记录里，添加域名和ip（服务器外网IP） 的映射

通过域名访问

此时网站可以通过 http://域名 地址直接访问

到这里，基本上就结束了。但是访问的时候会提示 http 不安全。此时需要升级 https

服务器生成 Let's Encrypt （SSL） 证书

# 安装 cerbot
 apt install certbot
 
#生成证书命令

sudo certbot certonly --email 邮箱 --webroot -w /home/ubuntu/demo -d 域名 -d 域名
# -w 后 指定的是代码所在目录
# -d  指的是域名（可以生成支持多个域名的证书）

证书配置到 nginx 中

server {
        listen 443;
        server_name 域名;

        root '/home/ubuntu/demo';
        index index.html index.htm;
        ssl on;
        ssl_certificate /etc/letsencrypt/live/***/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/***/privkey.pem;
        location / {
                try_files $uri $uri/ /index.html;
        }
        location ^~ /assets/ {
                gzip_static on;
                expires max;
                add_header Cache-Control public;
        }

        error_page 500 502 503 504 /500.html;
        client_max_body_size 20M;
        keepalive_timeout 10;
}
server {
  listen 80;
  server_name 域名;
  return 301 https://$server_name$request_uri;
}

证书永久有效期

目前 Encrept 只有三个月的有效期，可以设置永久有效期

 crontab -e
 15 2 * */2 * cerbot renew --quiet --renew-hook "sudo service nginx restart"

完成

此时可以通过 https：// 域名 进行访问项目地址。