OSS
object storage service
OSS

In hosting your front-end application with Netlify I also introduced another professional web hosting service called Netlify. What are the benefits of ALI Cloud oss compared to Netlify? Only one, network problems, and can be combined with ali Cloud CDN use.

If your domain name has been registered and you are obsessed with network delay, it is recommended to deploy your application in the OSS of Ali Cloud. You can purchase OSS directly on the official website of Aliyun and pay by volume. For individuals, the cost is less than one yuan per month.

  • Host your front-end application in Ali Cloud OSS
  • Series of articles: Personal server operation and maintenance guide

Create a Bucket and set it

A Bucket is a storage space in OSS. You can jump to the OSS console of Ali Cloud and create a Bucket according to the official document.

Once Bucket is successfully created, click the Basic Settings TAB

  1. Set the read and write permission to public read

  2. Configure static pages, default home page is index.html, 404 page is 404.html(depending on your error page)

Upload a file

We can upload files by clicking the upload button or dragging and dropping. But it is not convenient to automate, we can choose to use Ali Cloud’s tool Ossutil to upload files, refer to ossutil for detailed documentation

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

To use ossutil, you need to create an Access key. For details about how to create an AccessKey, see the documentation

Bind the domain name and enable the CDN

On the OSS console of Ali Cloud, select Bucket, click the domain name Management TAB, bind the user domain name, configure CDN acceleration, and confirm all the way

To apply for the certificate

CNAME

The Trailing slash problem and HTTP rewrite

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

Automatic deployment using Github Actions

Finally, you only need to configure automatic deployment, using Github Actions. For details, refer to my previous post: Github Actions Guide and Practices

See my config shfshanyue/blog on Github

name: deploy to aliyun oss

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    # Cut code to runner
    - uses: actions/checkout@v1
      with:
        submodules: true
    Download git submodule
    - uses: Srt32 / [email protected]
      with:
        args: git submodule update --init --recursive
    # use 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
    # Set ali cloud OSS ID /secret, stored in github secrets
    - name: setup aliyun oss
      uses: manyuanrong/setup-ossutil@master
      with:
        endpoint: oss-cn-beijing.aliyuncs.com
        access-key-id: The ${{ secrets.OSS_KEY_ID }}
        access-key-secret: The ${{ secrets.OSS_KEY_SECRET }}
    - name: cp files to aliyun
      run: ossutil cp -rf .vuepress/dist oss://shanyue-blog/
Copy the code

The deployment was successful

I am Shanyue, a programmer who likes running and climbing mountains. I will regularly share full stack articles in my personal official account. If you are interested in full stack interviews, front-end engineering, GraphQL, Devops, personal server operations and microservices, please follow me