Shulou(Shulou.com)05/31 Report--

This article introduces you what the solution based on Serverless Component full stack is, the content is very detailed, interested friends can refer to it, hope to be helpful to you.

Although the previous article introduced how to quickly build Restful API back-end services and Vue.js + Parcel front-end development architecture with Serverless Component based on Serverless Component's full-stack solution, after the final deployment, the access URL of Tencent Cloud COS is not custom, and in practical applications, we prefer to use custom domain names, while static files are generally accelerated through CDN. So how do you configure CDN accelerated domain names for previously deployed static websites?

Note: before you start reading this article, you need a domain name approved for domestic registration. If not, then this article is not suitable for you. Because of practical articles, I highly recommend reading and practicing at the same time, otherwise just read a lively, read and forget. Configure CDN

Log in to the CDN (content delivery Network) console page, and select Domain name Management from the left menu:

Click the add domain button to enter the domain name addition page. Since our static files are deployed on COS, the origin server type is selected as object Storage (COS), and then the bucket configuration is selected as our previously deployed one. As for the following acceleration service configuration, it is generally fine by default. If you have special needs, you can modify it yourself, as shown below:

Fill in the configuration and click submit. At this time, the deployment needs to wait about 2 minutes:

If you want to access through the added domain name, you also need to add a DNS resolution record of CNAME type (if you don't know how to add CNAME, you can refer to this tutorial to configure CNAME). After configuration, you can access it through http://blog.yugasun.com.

But at present, many browsers of non-HTTPS sites will have unsafe prompts, so users may be afraid to see the first reaction and will not continue to visit. So how to configure HTTPS for accelerated domain names?

Configure HTTPS to prepare certificates

Since you need to configure HTTPS, there must be certificates, but the certificates of general authorities need to be purchased. As a qiong bi programmer, I am inherently resistant to fee-based services.

So I opened the Tencent Cloud SSL certificate page with a lucky mind, and it lit up in front of me:

Yes, it is the button to apply for a free certificate!

So click on her crazily! Select a free certificate authority and enter the domain name (because this is a free certificate, it is not possible to set up a pan-domain name, such as * .yugasun.com).

Here, because I have applied for the certificate of blog.yugasun.com, for demonstration, I filled in demo.yugasun.com.

After the configuration is submitted, select manual verification and fill in the relevant DNS verification record according to the guidelines:

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

Finally, I can have my own free certificate. Dance and celebrate.

Start configuration

Now that the certificate is ready, let's get to the point: configure HTTPS for the configured CDN domain name. Go to the domain name details page and select advanced configuration:

Because it is a free certificate applied for on Tencent Cloud platform, it will host one for us, so that when we configure the certificate, we don't have to choose to upload it, we just need to choose from the hosted list. Isn't that very sweet?

Just configure and submit it. All our configuration processes have been completed here, so please visit and take a look at our results: https://blog.yugasun.com.

CDN Serverless Component

It must have taken you a lot of time to write so much on it, but I really didn't mean it, because it was the same hard way when I first configured it. I just want to attract more like-minded comrades-GayHub. But after going through it once, I don't want to go through it again. It's too painful. If you feel the same way as I do, then, buddy, don't go away, because the next content will make your life more shaky.

You may want to scold me, I worked so hard to pay so much, but you said, "do not love me, because you fell in love with scum man." Oh, I'm sorry. I'm going to start being a "CDN Component", too.

Modify serverless.yml configuration

First of all, enter the project directory fullstack-application-vue created by the full-stack solution article based on Serverless Component. If you don't want to read the previous article, there is also a project through train. Run the following command:

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

Modify the serverless.yml configuration file under the root directory of the project to add the hosts configuration for the inputs of @ serverless/tencent-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 # configure hosts:-host: blog.yugasun.com for CDN accelerated domain name below Https: certId: ZV99hYOj # this is the free certificate you applied for in Tencent Cloud: ID http2: off httpsType: 4 forceSwitch:-2

OK, it's configured, yes, that's right, you don't have to do any more configuration. Is it over before it starts? this is the pleasure brought by the scumbag.

Then execute the serverless-- debug command, sit still and have a cup of coffee, ☕️, brush your moments, and wait for deployment:

$serverless-debug / / balabala Debug information output 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-guangzhou functionName: fullstack- Vue-api-pro apiGatewayServiceId: service-5y16xi22 url: https://service-5y16xi22-1251556596.gz.apigw.tencentcs.com/release/ 254s > frontend > done

At this point, you can start rocking as much as you like.

Update Frontend technology stack

Previously, to facilitate Demo, I used parcel (a build tool that can quickly build zero configuration), but for Vue.js developers, most of them use the official scaffolding tool @ vue/cli to initialize the project. In order to keep up with the trend, I also refactored the front-end project under the frontend folder. But here you need to add a little new configuration, add the vue.config.js file in the root directory:

Const path = require ('path'); const PrerenderSPAPlugin = require (' prerender-spa-plugin'); module.exports = {configureWebpack: {resolve: {/ / the new environment variable alias alias: {ENV: require ('path'). Resolve (_ _ dirname,' env.js'),}

Then introduce into our entry file frontend/src/main.js:

Import Vue from 'vue';import App from'. / App.vue';// introduces api interface configuration urlimport 'ENV';import'. / style/app.css';Vue.config.productionTip = false;new Vue ({render: (h) = > h (App),}). $mount ('# app')

Why do you need to do this? Because when the express component is deployed, it automatically generates the interface file env.js containing the deployed API service in the directory configured with the inputs.code.root property of the website component, as follows:

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

So we can use the interface in the front end:

/ / get the user list async getUsers () {this.loading = true; const {data} = await axios.get (`${window.env.apiUrl} user`); if (data.code! = = 0) {this.userList = [];} else {this.userList = data.data | | [];} this.loading = false }, so much for sharing what is the solution based on the full stack of Serverless Component. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.