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

沙冷

本文只是简单的前端项目的部署,不涉及后台。
以 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 git@github.com:***/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) 的映射
image.png

通过域名访问

此时网站可以通过 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:// 域名 进行访问项目地址。

阅读 554
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏