Автоматически размещайте свой личный веб-сайт с помощью Alibaba Cloud OSS и действий github.

Docker Эксплуатация и обслуживание

OSSкоторыйobject storage service, служба хранения объектов. Мы можем использовать Alibaba CloudOSSразместить собственное клиентское приложение, личный веб-сайт или блог

существуетРазместите свое внешнее приложение с помощью netlifyЯ также представил еще одну профессиональную платформу для хостинга веб-сайтов.netlify. что по сравнению сnetlify, Каковы преимущества OSS от Alibaba Cloud? Есть только одна проблема, проблема сети, и ее можно использовать в сочетании с CDN Alibaba Cloud.

Если ваше доменное имя было зарегистрировано, и вы одержимы задержкой сети, рекомендуется использовать Alibaba CloudossРазверните свое приложение. Вы можете купить прямо с официального сайта Alibaba Cloudoss,плати как сможешь, для физических лиц ежемесячная стоимость составляет менее одного юаня.

Новый сегмент и настройки

Bucketэто место для хранения в OSS. Согласно официальной документации, вы можете перейти к консоли OSS Alibaba Cloud.Создать корзинуСоздайтеBucket.

После успешного создания корзины нажмите基础设置Страница закладок

  1. Настройте разрешения на чтение и запись какобщественное чтение

  2. Настройте статическую страницу, домашняя страница по умолчаниюindex.html, страница 404404.html(в зависимости от вашей страницы ошибки)

загрузить файлы

Мы можем загружать файлы, нажав кнопку загрузки или перетащив их. Но это неудобно автоматизировать, мы можем использовать инструменты Alibaba Cloud.ossutilЧтобы загрузить файлы, подробная документацияossutil

$ ossutil cp -rf .vuepress/dist oss://shanyue-blog/

использоватьossutil, вам нужно создатьaccess key, справочная документацияСоздать ключ доступа

Привязать доменное имя и активировать CDN

В консоли OSS Alibaba Cloud выберите Bucket, перейдите на вкладку «Управление доменными именами», привяжите доменное имя пользователя, настройте ускорение CDN и полностью подтвердите.

绑定用户域名

配置CDN加速

Подать заявку на сертификат

申请证书

CNAME

配置CNAME

配置CDN加速

Проблема с косой чертой при перезаписи http

  • /posts/ -> /posts/index.html
  • /about -> /about.html

配置 rewrite
配置 rewrite

Автоматическое развертывание с помощью действий github

Наконец, вам нужно только настроить автоматическое развертывание, которое используется здесь.github actions, обратитесь к моей предыдущей статье для деталей:Руководство по началу работы с действиями github и практика

Вы можете обратиться к моей конфигурации на githubshfshanyue/blog

name: deploy to aliyun oss

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    # 切代码到 runner
    - uses: actions/checkout@v1
      with:
        submodules: true
    # 下载 git submodule
    - uses: srt32/git-actions@v0.0.3
      with:
        args: git submodule update --init --recursive
    # 使用 node:10
    - name: use Node.js 10.x
      uses: actions/setup-node@v1
      with:
        node-version: 10.x
    # npm install
    - name: npm install and build
      run: |
        npm install
        npm run build
      env:
        CI: true
    # 设置阿里云OSS的 id/secret，存储到 github 的 secrets 中
    - name: setup aliyun oss
      uses: manyuanrong/setup-ossutil@master
      with:
        endpoint: oss-cn-beijing.aliyuncs.com
        access-key-id: ${{ secrets.OSS_KEY_ID }}
        access-key-secret: ${{ secrets.OSS_KEY_SECRET }}
    - name: cp files to aliyun
      run: ossutil cp -rf .vuepress/dist oss://shanyue-blog/

Развертывание прошло успешно

部署成功

Я Shanyue, программист, обожаю бегать и лазить по горам, буду регулярно выкладывать full-stack статьи в личном паблике. Если вас интересуют интервью с полным стеком, фронтенд-инжиниринг, graphql, devops, эксплуатация и обслуживание персональных серверов и микросервисы, вы можете подписаться на меня.

如果你对全栈面试，前端工程化，graphql，devops，个人服务器运维以及微服务感兴趣的话，可以关注我

Категории