In the last article on how to update qiniuyun CDN certificate with Jianmu CI, we have successfully placed the external link of qiniuyun resources under the specified domain name, and upgraded the protocol of the external link to HTTPS. Let’s use jianmu CI for something more meaningful this time.

For front-end development partners, the biggest value after writing a project is to release their labor results to the line, so that more people can understand and use them. One of the steps involved here is the package deployment of the project, but for some new partners, relevant server knowledge, such as Linux and Nginx, may be relatively unfamiliar; If you don’t have an experienced person on the team to lead you through it, you’ll be even more stretched. But the good news is that with our building-wood CI, and the nodes already in the node library, it’s easy to get front-end projects online, so front-end developers can focus more on what they’re good at.

The preparatory work

The title talks about deploying the front end project to the CDN using the Buildwood CI, so we need to prepare a front end project first. In this article, we will use vite, which has recently become popular in front circles, to generate a set of vuE3 + TS code. Vite official website: vitejs.cn/

Open editor, terminal input. (NPM init vite@last my-vue-app –template vue-ts)

Yarn create vite my-vue-app--template vue-ts // or NPM init vite@last my-vue-app--template vue-ts # If you are used to NPM, see the NPM commandCopy the code

Terminal type CD my-vue-app to go to the project root path, execute the following command and then install dependencies for the project.

yarn 
// or 
npm install
Copy the code

Let the project run and see how it works! Execute the following command (script instruction, see package.json under the project)

yarn dev
Copy the code

Browser type http://localhost:3000 to see the following page to show that a concise VUE3 project has been set up.

Next, you need to put the code in gitee’s repository, because it will be used later to build the WOOD CI. Projects created with Vite by default are not git initialized, so go back to the terminal for input

git init
Copy the code

Leave the project to Git to manage.

Here, take creating a warehouse on Gitee as an example. Create a new warehouse named my-vue-app.

Back to terminal input

Git remote add origin https://gitee.com/[gitee]/my-vue-app.gitCopy the code

Push the local commit code to the Gitee repository, then just copy the following DSL process into the Jitimi CI and wait for the process to run. The front-end code in the newly created My-vue-app repository will be automatically cloned, and all the static front-end resources in the dist folder generated after build will be synchronized to the previous COMyan storage space on qiniu Cloud.

Name: Test CDN CI/CD Description: Test CDN CI/CD Pipeline: GIT_clone: type: gIT_clone :1.2.1 PARam: # remote_url git address: https://gitee.com/comyan/my-vue-app.git # labels, branches or pr/Mr Ref: refs/heads/master # username username: ((gitee.comyan_password)) node_build: type: nodejs_build:1.2.1-14.16.1 param: # working directory workspace: ${git_clone. Git_path} # specified registry_url NPM warehouse address: https://registry.npm.taobao.org qiniu_upload: type: Qiniu :1.0.1-file-upload param: # qiniu_bucket: comyan # qiniu_ak: ((qiniu_authorization.qiniu_access_key)) # ((qiniu_authorization.qiniu_secret_key)) # Automatic identification when zone is not set North China: Z1; South China: Z2; North America: NA0; Qiniu_upload_uri_prefix: "" # Qiniu_upload_DIR: ${git_clone. Git_path}/distCopy the code

As expected, the whole process is successfully executed. Go back to the seven niuyun to see if the resource links you want have been generated?

Now that the index.html is here, can I just copy the outer link of the index.html and see the page?

If the page can be accessed successfully, doesn’t that mean the project has been deployed successfully? This way to achieve front-end deployment online is too simple, it can not be happy to touch 🐟.

However, your boss suddenly sent a message saying that the react logo was too ugly. At this moment your heart may be ten thousand wudi 🐎 pentium, but there is no way to only change. Fortunately, JIANmu CI already has a set of process examples, and logo changes and replacements are also quick.

Yeah, it’s great. The React logo is big and round like a pie. After confirming the modification, I re-executed the process on the wood CI.

The process is successfully executed, so you are happy to tell the boss that the logo has been successfully replaced.

Boss: “What? You changed what, you blind or I 🦐, do not want to come tomorrow is?”

Oh, what a fat thing! Didn’t the process run successfully? Didn’t Jian Mu CI replace the file for me this time? Instead, open the source code to see what’s going on.

Matters needing attention

In fact, we have replaced logo.png locally, but by looking at the source code of the web page, we found that the SRC of the image in index.html still uses the same CDN external chain. This also creates a common problem with CDN – the caching mechanism causes files not to be updated in a timely manner. But the CDN cache problem is inevitable, because it is the CDN cache that allows us to load resources more quickly when a web page is visited. So how do we solve this problem? Here is also the focus of this article. Specify the uri prefix of the file resource and the basic path of the file resource when the front-end project is packaged. Here, the vite front-end package tool is used as an example to find and modify the vite. Config.js in the project.

import {defineConfig, UserConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import { name, version } from './package.json';
// https://vitejs.dev/config/
export default defineConfig(({command,mode})=>{
  return {
    plugins: [vue()],
    // base public path
    base:
      command === 'build' && mode === 'cdn'
        ? `/${name}/${version}/`
        : '/',
  }
})

Copy the code

With a bit of explanation, the base argument prefixes all links in the index.html generated by Vite when the project is packaged with the path you specify. After the YARN build –mode CDN command is executed on the TERMINAL, the resource path prefix in the packaged index. HTML file is combined with the values of name and version in package.json. This corresponds to the resource links generated synchronously on the seven Niuyun. After each subsequent change in the front-end project, you just need to upgrade the version in package.json. This example upgrades the versio in package.json to 1.0.1, recommits the commit, and pushes it to Gitee’s my-vue-app repository. In this way, after deployment and packaging with Jianmu CI again, qiniuyun will be based on the different version, so that the file resources after each change will be placed under the folder of different version number. This also avoids the problem of update invalidation caused by CDN cache. In addition, you need to make subtle adjustments to the DSL. Copy the upgraded VERSION of DSL to run a process to see the effect!

Name: Test CDN CI/CD Description: Test CDN CI/CD Pipeline: GIT_clone: type: gIT_clone :1.2.1 PARam: # remote_url git address: https://gitee.com/comyan/my-vue-app.git # labels, branches or pr/Mr Ref: refs/heads/master # username username: ((gitee.comyan_password)) node_build: type: nodejs_build:1.2.1-14.16.1 param: # working directory workspace: ${git_clone. Git_path} # specified registry_url NPM warehouse address: https://registry.npm.taobao.org # build_arg build parameters: --mode CDN qiniu_upload: type: qiniu:1.0.1-file-upload param: # qiniu_bucket: comyan # qiniu_ak: ((qiniu_authorization.qiniu_access_key)) # ((qiniu_authorization.qiniu_secret_key)) # Automatic identification when zone is not set North China: Z1; South China: Z2; North America: NA0; Qiniu_zone: qiniu_zone: qiniu_zone: z1 # ${node_build.package_version} # Qiniu_upload_dir: ${git_clone. Git_path}/distCopy the code

Wait for Jianmu CI to finish the process again, and then return to the storage space of Qiniuyun. All the packaged file resources are put into the folder with the path of My-vue-app /1.0.1.

At this time, copy the index.html outer chain, and you can find that the project name and version number are added to the outer chain through the browser address bar. In this way, the problem caused by CDN cache is solved.

This article is the original contribution of jianmu blogger “comyan”, please contact authorization.

Official website of the project: jianmu.dev

Project hosting: gitee.com/jianmu-dev

Project documentation: docs. Jianmu.dev

Online experience: ci.jianmu.dev