Vercel国内无法访问解决方案

之前把博客转成Hugo,然后整个托管到Vercel上面了(参考文章:Typecho博客迁移到Hugo),本来访问还是好好的,结果最近有朋友和我说已经不能访问了。本来以为是他们各别的问题,因为我一直可以访问(可能是长期使用公司VPN的原因),结果最近使用老的Windows电脑看的时候发现,果然不能访问了。

找原因

网上搜了一圈,结果原因就是你懂的。

P个S,好用并且免费东西还是没逃开这个结局。

找解决方案

  1. 换个主机
  2. 官方解决方案

首先推荐方案2,官方背书的解决方案值得推荐。

方案1要花钱,但可以保证独立IP,SEO收录要好一些,放香港访问速度还可以,下面记录一下折腾过程。

官方解决方案

将 A 记录从 76.76.21.21 改成 76.223.126.88 官方建议将 cname 从 cname.vercel-dns.com 修改为 cname-china.vercel-dns.com

参考:Vercel Status Status - Errors Accessing From China

买个主机

域名没备案,使用阿里云国内方案的行不通,那就考虑香港的主机了。虽然阿里云也有香港的主机,不过298一年对我来说有点贵(有钱的可以尝试哈,毕竟稳定好用),主机我选用了之前一直使用的校长的主机:篱落主机,价格适中,带独立IP,我买的是虚拟主机,有条件的可以考虑VPS。

我买的是上面的那款,有兴趣的可以点下面的链接看看哈。

篱落主机

------------更新--------------

现在已经切成成阿里云的轻量应用服务器了,比上面的要稳定好多。PS:现在主机做起来不容易,竞争激烈,小运营商越来越少了。

配置自动部署

Vercel一个好用之处就是代码提交之后什么也不用去操心,会自动把内容给你部署上去。如今我们要自己实现这个过程,有读者可能会问为什么不用FTP直接上传上去,你当然可以这么做,但当你的文章有几百这个量级之后,相信我,每次上传的时间会让你疯的,并且每次还要用FTP工作上传好累,还不如使用Wordpress这种解决方案。

于是我们需要找一个自动部署的工具来替我们自动化完成这个工作,其实就是相当于找一个CI了。常见的免费可用的CI工具有2个,一个是Traivs-ci,一个是Github Action,我使用的是Github Action。关于Git Action的使用教程我就不赘述了,详细可以参考:GitHub Actions

分享一下我的配置:

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.80.0'

      - name: Build
        run: hugo --minify


      - name: Zip
        uses: papeloto/action-zip@v1
        with:
          files: public/
          dest: public.zip

      - name: Upload bundle
        uses: bayssmekanique/action-simple-file-upload@v1
        with:
          user: your_name
          password: ${{ secrets.ftp_password }}
          host: your_host
          src: public.zip
          dest: your/path
      
      - name: Deploy Stage
        uses: fjogeleit/http-request-action@master
        with:
          url: 'your zip path'
          method: 'GET

简要说一下这个流程:

  1. 拉代码
  2. 装hugo
  3. hugo build
  4. 压缩
  5. 上传FTP
  6. 远程解压

其中最后一步是通过URL访问触发的,你也可以选择其他触发方式,在你的FTP上写一个解压的脚本就可以了。

配置Rewrite Rule

我用的是Apache,配置一下https跳转之类的,如果是老网站转的可能还要配置其他的,可根据自己的情况来。我的配置如下:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)\.html$ /$1/ [L,R=301] 

RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]

一个是https,另一个是去掉html。

Nginx的配置可以参考:Nginx设置www及https跳转

结语

本文使用的是Github Action部署,但免费的使用是有限制的,具体可以参考:Pricing · Plans for every developer