Cloud development Github Action automation deployment

Cloud development static hosting is the ability to host static websites provided by cloud development, and the distribution of static resources (HTML, CSS, JavaScript, fonts, etc.) is supported by Tencent Cloud Object Storage COS and Tencent Cloud CDN with multiple edge outlets

Github provides pages services for static page presentation for open source projects, on which many developers host their own static websites and blogs, as do many open source project cases and document pages. However, since most of Pages' CDN nodes are abroad and the speed of access at home is not ideal, many developers want to improve the speed and stability of websites in China, and today we will show you how to automatically deploy to the faster-access cloud development static hosting service with Github Action's continuous integration services and cloud development Github Action extensions.

Introduction to static hosting for cloud development

Cloud development static hosting is the ability to host static websites provided by cloud development, and the distribution of static resources (HTML, CSS, JavaScript, fonts, etc.) is supported by Tencent Cloud Object Storage COS and Tencent Cloud CDN with multiple edge outlets. D eployments can be managed through the Tencent cloud console, command-line tools, and Github Action for cloud development mentioned below. Cloud development provides a free secondary domain name (with limited down-speed when custom domain names are not bound), while supporting free binding of the developer's own custom domain name.

The first environment enjoys 1GB of capacity and a free amount of 5GB of traffic per month, which should be enough for a personal blog that isn't very accessible. If the traffic is large, billing is a pay-as-you-go method based on usage charges, and you can view the billing price documentation https://cloud.tencent.com/product/wh/pricing

The cloud develops static managed deployment sites, and can also use the one-stop Serverless back-end capabilities provided by cloud development, such as cloud functions, cloud databases, cloud storage, identity services, and more. For example, you can use cloud functions and cloud databases to implement comments, message board functions, etc. on static hosted personal blogs, or you can change the content management of blogs from the original static file deployment to dynamic content management, etc. , the use of expansion is very much, developers can continue to explore in depth.

How to deploy to cloud development with Github Action at the click of a button

Here's how to automatically deploy Github static pages to static hosting for cloud development for stable access speeds and more scalability.

For example, the developer's personal blog Github project is structured as follows:

|-- src

|-- build

|-- README.md

You want to deploy the static site code generated by the build directory under the project to the root of the static site hosting that opens on this side of cloud development.

Write a Github Action file

First configure the Github Action file .github/workflows/main.yml in the project directory as follows, and if you have already configured Github Action, you don't need to re-create it, and then refer to the configuration below.

    on: [push] # push 代码时触发
    jobs:
    deploy:
        runs-on: ubuntu-latest
        name: Tencent Cloudbase Github Action Example
        steps:
        - name: Checkout
            uses: actions/checkout@v2
        
        # 使用云开发 Github Action 部署
        - name: Deploy static to Tencent CloudBase
            id: deployStatic
            uses: TencentCloudBase/cloudbase-action@v1
            with:
                # 云开发的访问密钥 secretId 和 secretKey
            secretId: ${{ secrets.SECRET_ID }}
            secretKey: ${{ secrets.SECRET_KEY }}
            # 云开发的环境id
            envId: ${{ secrets.ENV_ID }}
            # Github 项目静态文件的路径
            staticSrcPath: build

You can see that the configuration primarily uses the Cloud Development Github Action extension TencentCloudBase/cloudbase-action@v1 to deploy static files.

Note that the secretId, secretKey, and envId in the parameters section of the configuration file are sensitive information and need to be placed in the project's secret store, where you do not have to fill in the real values, just follow the above example to fill in the variables.

StaticSrcPath fills in the directory build generated by static site building here, and if you want to deploy static resources to a subdirecte in the cloud instead of the root, you can configure another parameter, staticDestPath.

Configure cloud development access information

We also need to configure the SECRET_ID, SECRET_KEY, ENV_ID in the project's Secrets, and here's how.

First of all to open the cloud development static website, you can refer to the opening guide: https://docs.cloudbase.net/hosting/, after opening the environment can get the environment ID ENV_ID, and then Tencent cloud access management page can be configured with a pair of API access keys, that is, SECRET_ID, SECRET_KEY.

Then set up the settings in Settings/Secrets within your Github project, SECRET_ID, SECRET_KEY, ENV_ID the information.

Once configured, you can submit the code experience for automatic deployment, run automatically every time git push Actions deploy static resources of your project to your own cloud development static hosting environment, and once deployed successfully, you can access your own website through the secondary domain name provided by cloud development.

Configure a custom domain name

Cloud development provides a free secondary domain name down the speed is limited, developers are best bound to a domain name of their own, binding domain name is free, but also in Tencent Cloud configuration of a free SSL certificate, to access their own website through HTTPS.

Methods for customizing domain names can be used in this document https://docs.cloudbase.net/hosting/custom-domain.html

Once configured, test the speed of access to sites deployed in the cloud to develop static hosting, and you can see that access is very fast everywhere based on the speed data.

More extended play

Cloud Development Tencent CloudBase Github Action This extension automatically deploys Github projects to the cloud development environment and currently supports static hosting capabilities, followed by the deployment of other resources, such as the ability to deploy service-side projects developed in Node JS, Java, PHP, and other languages to cloud development at the click of a button to obtain Serverless-based dynamic web site services. Or automate the deployment of full-stack applications with databases, front-ends, and back-ends.

Tencent CloudBase Github Action Extended Market Address

https://github.com/marketplace/actions/tencent-cloudbase-github-action

Tencent CloudBase Github Action code open source address

https://github.com/TencentCloudBase/cloudbase-action

You are welcome to experience more, star support, or submit An issue/Pull request to contribute.