Skip to content

Latest commit

 

History

History
318 lines (214 loc) · 10.3 KB

🚀 静态网站部署记录.md

File metadata and controls

318 lines (214 loc) · 10.3 KB

🚀 静态网站部署记录

云服务器，简单来说，就是一台24/7在线的计算机，通过公网可以访问其中的文件。

一、服务器配置

  1. 在市场上，有许多服务器厂商可供选择，例如 阿里云、腾讯云、京东云、华为云等。根据个人需求选择合适的云服务器。

  2. 系统选择可依个人偏好，我选择了 Ubuntu 作为服务器操作系统。

  3. 购买后，需进行密码重置，以方便使用 SSH 登录。

    • 具体步骤为：云服务器 ECS > 实例 > 示例详情。

  4. ssh 登录测试

    • 通过ssh <user_host> 或 ssh <user_account>@<user_host>进行登录。若密码登录失败，可尝试此方式。

    • 第一次登录需进行指纹创建，以防中间人攻击。

      The authenticity of host '<user_host>' can't be established.
ED25519 key fingerprint is SHA256:SaNyCX940ieblSBaRWABfKOSa45ZdlusT5UxKVd5m8s.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

    • 登录成功后，会输出系统信息。如觉得每次输入密码麻烦，可设置免密登录以提高便利性。

      Welcome to Ubuntu 22.04.3 LTS (GNU/Linux 5.15.0-88-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Fri Jan 12 06:24:17 PM CST 2024

  System load:  0.0               Processes:             120
  Usage of /:   9.0% of 39.01GB   Users logged in:       0
  Memory usage: 18%               IPv4 address for eth0: 172.17.54.201
  Swap usage:   0%

 * Strictly confined Kubernetes makes edge and IoT secure. Learn how MicroK8s
   just raised the bar for easy, resilient and secure K8s cluster deployment.

   https://ubuntu.com/engage/secure-kubernetes-at-the-edge

Expanded Security Maintenance for Applications is not enabled.

23 updates can be applied immediately.
To see these additional updates run: apt list --upgradable

2 additional security updates can be applied with ESM Apps.
Learn more about enabling ESM Apps service at https://ubuntu.com/esm


*** System restart required ***

Welcome to Alibaba Cloud Elastic Compute Service !

Last login: Fri Jan 12 14:11:52 2024 from 123.120.56.167

  5. 配置云服务器安全组，开放http:80和https:443端口，供外网访问。

    image-20240113下午102458663

  6. 配置 Nginx 反向代理⌘。

    • 下载 Nginx

      sudo apt update && sudo apt install nginx

    • 检查是否下载完毕

      nginx -v

    • 启动 Nginx

      sudo systemctl start nginx

      通过浏览器访问你的 <user_host>，如果出现以下页面说明 Nginx 启动成功。

      image-20240114上午12109801

      • 可能出现的失败案例：

        ➜  nginx nginx
nginx: [emerg] getpwnam("nginx") failed in /etc/nginx/nginx.conf:2
        ➜  nginx systemctl start nginx
Job for nginx.service failed because the control process exited with error code.
See "systemctl status nginx.service" and "journalctl -xeu nginx.service" for details.
        ➜  nginx tail /var/log/nginx/error.log
2024/01/14 01:37:16 [crit] 38147#38147: *8 stat() "/root/Desktop/zilean/" failed (13: Permission denied), client: 123.120.53.112, server: www.rux.ink, request: "GET / HTTP/1.1", host: "www.rux.ink"

      • 有可能是因为权限不足导致的启动失败，修改 nginx.conf user 为 root 重新启动 nginx

        ➜  nginx vim nginx.conf

    • 修改 /etc/nginx/sites-available/default 文件：

      server {
    listen 80;
  	
  	# default_server 默认为服务器host，用于自定义域名
    server_name default_server;

		# 修改 target_path 自定义路径
    root target_path;
  
    index index.html;

    location / {
        # 尝试查找请求的文件，如果找不到则返回 404
        try_files $uri $uri/ =404;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

      也可以新建 your_config_file 文件用于项目代理，替换 your_config_file 为你创建的配置文件名。

      • 新建配置文件：

        touch /etc/nginx/sites-available/your_config_file && vim your_config_file

      • 配置内容与上文的 default 文件一致，故省略。

      • 在 /etc/nginx/sites-enabled/ 目录下创建符号链接：

        sudo ln -s /etc/nginx/sites-available/your_config_file /etc/nginx/sites-enabled/

      • 检查 Nginx 配置是否正确：

        sudo nginx -t

        如果没有错误，将显示 nginx: configuration file /etc/nginx/nginx.conf test is successful。

      • 重启 Nginx 服务

        sudo systemctl restart nginx

        现在，你的新配置文件应该已经生效。你可以按照这个模板为每个应用程序或站点创建单独的配置文件。

二、项目部署

通过上述配置，我们只需将 .html 文件上传至 target_path 即可实现公网访问。

文件远程推送有多种方式，以下是两种常用方法。

使用 SCP

  1. 使用以下命令将文件从本地系统复制到远程服务器：

    scp /path/to/local/file username@remote_server:/path/to/destination/
    • /path/to/local/file 是本地文件路径。
    • username 是远程服务器上的用户名。
    • remote_server 是远程服务器的 IP 地址或域名。
    • /path/to/destination/ 是远程服务器上的目标路径。

    示例：

    scp /Desktop/zilean/dist root@192.168.1.100:/root/Desktop/zilean

  2. 输入用户密码（或如果配置了 SSH 公钥，可能需要输入 SSH 密钥密码）。

使用 Rsync

rsync 是一个更强大的工具，可以在多次传输中仅传输文件的变化部分，从而提高文件同步效率。

  1. 使用以下命令将文件从本地系统同步到远程服务器：

    rsync -avz -e "ssh" /path/to/local/file username@remote_server:/path/to/destination/

    参数说明：

    • -avz: a 表示递归复制，v 表示详细模式，z 表示压缩传输。
    • -e "ssh": 指定使用 SSH 协议。

    示例：

    rsync -avz -e "ssh" /Desktop/zilean/dist root@192.168.1.100:/root/Desktop/zilean

  2. 输入用户密码（或如果配置了 SSH 公钥，可能需要输入 SSH 密钥密码）。

确保推送的目标路径正确。通过这些方法，便可以将文件上传到服务器，实现远程部署。

三、引入自动化，简化部署操作

利用 GitHub Actions，我们可以通过 git push 的方式向服务器上传文件，实现前端项目的自动化部署。

选择创建工作流

在 Actions 中选择模板创建，或者在项目中的 .github/workflows/ 目录下创建你的 YML 文件。

image-20240114上午31626749

修改YML文件

name: Deploy to Aliyun OSS

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [20.x]

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Cache node_modules
        uses: actions/cache@v3
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install node_modules
        run: npm install

      - name: Build
        run: npm run build

      - name: SSH Deploy
        uses: easingthemes/ssh-deploy@v5.0.0
        with:
          # SSH 私钥
          SSH_PRIVATE_KEY: ${{ secrets.ALIYUN_SERVER_SSH_KEY }}
          # 远程主机地址
          REMOTE_HOST: ${{ secrets.ALIYUN_SERVER_HOST }}
          # 远程用户
          REMOTE_USER: root
          # 源目录，相对于 $GITHUB_WORKSPACE 根目录，例如：dist/
          SOURCE: ./dist/*
          # 目标目录
          TARGET: /root/Desktop/zilean
          # 传递给 rsync 的参数
          ARGS: -rlgoDzvc -i
          # 用逗号分隔的排除路径，例如：/node_modules/
          EXCLUDE: /node_modules/
          # 在 rsync 之前在主机上运行的脚本
          SCRIPT_BEFORE: |
            # 检查 TARGET 目标路径是否存在，不存在则创建
            if [ ! -d "/root/Desktop/zilean" ]; then
              mkdir -p "/root/Desktop/zilean"
            fi
          # 在 rsync 之后在主机上运行的脚本
          SCRIPT_AFTER: |
            echo "After deploy script"

定义打包时全局变量

image-20240114上午32814075

Push测试

image-20240114上午33653960 image-20240114上午34354429