By yugasun from yugasun.com/post/server… This article can be reproduced in full, but the original author and source need to be retained.

While the previous article described how to quickly build a front-end development architecture for Restful API back-end services and vue.js + Parcels with Serverless Component as a full-stack solution, However, after the final deployment, the access URL of Tencent Cloud COS is not customized, and in practical application, we prefer to use the customized domain name, and static files are generally accelerated through CDN. So how to configure a CDN accelerated domain name for a previously deployed static website?

Note: before you can start reading this article, you need a domestic registered domain name, if not, then this article is not for you. Because of the practice of the article, I am highly recommended, while looking at the practice, otherwise just see a lively, read forget……

Multi-picture warning!! Multi-picture warning!! Multi-picture warning!!

Configure the CDN

Log in to the CDN console page and choose Domain Name Management from the left menu:

Add page button click add domain name, enter the domain name, because our static file is deployed on the COS, so the source station type selection object storage (COS), then the bucket set we just before the deployment of good choice, as for the acceleration of the following service configuration, generally the default line, if you have special demand, can change ourselves, The diagram below:

Fill in the configuration and click Submit. The deployment takes about 2 minutes:

If you want to access the added domain name, you also need to add a DNS resolution record of type CNAME (if you don’t know how to add a CNAME, see this tutorial to configure CNAME), which can be accessed at blog.yugasun.com.

However, for non-HTTPS sites, many browsers have an unsafe message, and the user’s first reaction may be to fear and stop visiting. So how do you configure HTTPS for accelerated domain names?

Configure HTTPS

To prepare the certificate

Since HTTPS needs to be configured, certificates are definitely indispensable, but certificates of general authorities need to be purchased. As a Qiong BI programmer, I am resistant to charging services in my bones.

So holding a lucky psychological point opened Tencent cloud SSL certificate page, a bright:

Yes, the free certificate application button ！！！！！！

So crazy click on her! Select a free certificate authority, fill in the domain name (because this is a free certificate, so can not set a generic domain name, such as: *.yugasun.com) and configure the combination:

Since I have applied for the certificate of blog.yugasun.com, I fill in demo.yugasun.com for demonstration

After the configuration is submitted, select manual authentication and fill in relevant DNS authentication records as instructed:

After verification, you can use or download the issued free certificate:

Finally, you can have your own free certificate. Dance and celebrate

Start the configuration

Now that the certificate is ready, it is time to configure HTTPS for the configured CDN domain name. On the domain name details page, select Advanced Settings.


Because it is a free certificate applied on Tencent cloud platform, it will help us to host a certificate, so that when we configure the certificate, we don’t need to choose upload, we just need to choose from the list of hosting, isn’t it very considerate (*￣))

Now that we’ve done all the configuration, visit blog.yugasun.com to see what we’ve done.

CDN Serverless Component

It must have taken us a lot of time, but I really didn’t mean it, because my first configuration was the same way all the way through, I just want to attract more like-minded comrades – GayHub. But after experiencing once, do not want to go through again, it is too painful…… If you feel the same way as I do, don’t walk away, because this is about to make your life wobble.

You may scold me, I have worked so hard, and you say, “don’t love me, because you like a man who cheats on women’s feelings.” Sorry I’m going to start doing CDN Component too.

Modify the serverless. Yml configuration

First, go to the project directory fullstack-application-vue, which is created based on the Serverless Component fullstack solution article. If you don’t want to read the previous article, there is also a project directory here. Run the following command:

$ serverless create --template-url https://github.com/yugasun/tencent-serverless-demo/tree/master/fullstack-application-vue
Copy the code

Modify the serverless. Yml configuration file in the root directory of the project to add hosts to the inputs of the @serverless/ Tceh-website component as follows:

frontend:
  component: '@serverless/tencent-website'
  # reference: https://github.com/serverless-components/tencent-website/blob/master/docs/configure.md
  inputs:
    code:
      src: dist
      root: frontend
      hook: npm run build
    env:
      apiUrl: ${api.url}
    protocol: https
    The following is the CDN accelerated domain name configuration
    hosts:
      - host: blog.yugasun.com
        https:
          certId: ZV99hYOj # This is the ID of the free certificate you applied for in Tencent Cloud
          http2: off
          httpsType: 4
          forceSwitch: 2 -
Copy the code

OK, it’s configured. Yeah, that’s right. You don’t have to do anything else. Is not the end of the beginning, this is “cheating with female feelings of the man” bring pleasure……

Then run the serverless –debug command, sit down and have a cup of coffee ☕️☕️ listens, swipe moments, and wait for deployment:

$ serverless --debug// balabala, output debugging information frontend: url: https://br1ovx-efmogqe-1251556596.cos-website.ap-guangzhou.myqcloud.com env: apiUrl: https://service-5y16xi22-1251556596.gz.apigw.tencentcs.com/release/ host: - https://blog.yugasun.com (CNAME: Blog.yugasun.com.cdn.dnsv1.com) API: region: ap - through functionName: fullstack - vue - API - pro apiGatewayServiceId: Service - 5 y16xi22 url: https://service-5y16xi22-1251556596.gz.apigw.tencentcs.com/release/ 254 s holds the frontend holds the doneCopy the code

Now you can start to rock and roll

Update the Frontend technology stack

Previously, parcel was used for Demo purposes, but for vue.js developers, the official scaffolding tool @vue/cli is used to initialize projects. In keeping with the trend, I also refactored the frontend projects under the frontend folder. However, we need to add a slightly new configuration here. Add the vue.config.js file in the root directory:

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  configureWebpack: {
    resolve: {
      // This new environment variable alias
      alias: {
        ENV: require('path').resolve(__dirname, 'env.js'),},},},},};Copy the code

Then we’ll introduce in our entry file frontend/ SRC /main.js:

import Vue from 'vue';
import App from './App.vue';
// Import the API configuration URL
import 'ENV';
import './style/app.css';

Vue.config.productionTip = false;

new Vue({
  render: (h) = > h(App),
}).$mount('#app');
Copy the code

Why do we need to do that? The express component automatically generates the env.js interface file containing the deployed API service in the directory configured in the inputs code. Root attribute of the website component as follows:

// frontend/env.js
window.env = {};
window.env.apiUrl = "https://service-5y16xi22-1251556596.gz.apigw.tencentcs.com/release/";
Copy the code

So we can use this interface in the front end:

// Get the list of users
async getUsers() {
  this.loading = true;
  const { data } = await axios.get(`The ${window.env.apiUrl}user`);

  if(data.code ! = =0) {
    this.userList = [];
  } else {
    this.userList = data.data || [];
  }
  this.loading = false;
},
Copy the code

conclusion

The Serverless Chinese community is now online, with a wealth of best practice articles and excellent learning blogs about Serverless. There are also wechat and QQ groups for learning and communication. If you are interested, you can go to the Serverless Chinese Technology Community.

Of course, if you are looking for some excellent Serverless components in your development, but don’t know where to find them, you can save my open source project awesome-Serverless Framework which has been maintained and updated for a long time.