Typescript-based full stack engineering template – Vue3 front end

Weex Clone is a simple ordering app based on Tyepscript. As a complete example of full-stack development, the application includes backend implementations based on node.js and Koa frameworks, as well as front-end engineering based on Vue3. The repository is a complete front-end implementation that uses AWS Cognito as user Authentication. In addition to the implementation of the code, it also includes a complete CI/CD release process. The front-end system is deployed on Heroku by default, but can also be deployed on AWS with Amplify or on our own VPS Nginx. See the typescript-based full-stack engineering template – backend Node.js + Koa2

Use vuE-CLI to create vuE3 application framework

  1. Install or update VUE-CLI
npm install -g @vue/cli
Copy the code

or

npm update -g @vue/cli
Copy the code
  1. Create an

Lint

  1. Add the.prettierrc.js file
module.exports = {
  tabWidth: 2.semi: false.singleQuote: true.trailingComma: 'all',}Copy the code
  1. To modify the workspace configuration, ** be sure to reopen vscode **
{
  "editor.formatOnSave": false."editor.codeActionsOnSave": {
    "source.fixAll.eslint": true}}Copy the code
  1. Run NPM run Lint

Compile package validates environment variables

  1. Mode is an important concept in Vue CLI projects. By default, there are three modes:
  • development is used by vue-cli-service serve
  • test is used by vue-cli-service test:unit
  • production is used by vue-cli-service build and vue-cli-service test:e2e

You can overwrite the default mode used for a command by passing the –mode option flag. For example, if you want to use development variables in the build command:

  "scripts": {
    "dev": "vue-cli-service serve"."test": "vue-cli-service serve --https --mode mytest"."staging": "vue-cli-service build --mode staging".Copy the code
  1. Mode determines which environment variable file to use for packaging
.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git
Copy the code

In addition to VUEAPP* variables, there are also two special variables that will always be available in your app code:

  • NODE_ENV – this will be one of “development”, “production” or “test” depending on the mode the app is running in.
  • BASE_URL – this corresponds to the publicPath option in vue.config.js and is the base path your app is deployed at.
  • NODE_ENV can be declared again in the environment variables file. For example, setting ** NODE_ENV=production ** in.env.staging can optimize the code under staging when you confirm packaging

Build continuous integration and continuous deployment environments

Deploy to Nginx on Oracle CentOS 8 servers

  1. Configure Nginx to support static service of multiple secondary domain names for a single port
  • Edit /etc/nginx/nginx.conf to support the same port on different static servers
server {
    listen  80;
    server_name     test.magicefire.com;
    root            /usr/share/nginx/html/test;
    location / {}
}

server {
    listen  80;
    server_name     staging.magicefire.com;
    root            /usr/share/nginx/html/staging;
    location / {}
}

server {
    listen  80;
    server_name     production.magicefire.com;
    root            /usr/share/nginx/html/production;
    location / {}
}
Copy the code

Create a corresponding directory and test HTML under the directory

  • Modify Cloudflare to add three A records to support VPS IP

  • Use Let’s Encrypt to modify HTTPS for Nginx to support installing Certbot see Node Server deployment

certbot -nginx
Copy the code

2. Write the Github Actions deployment script

  1. NODE_ENV=production. NPM ci does not install devDependencies. Leads to NPM run the build error unable to find a vue cli – service of vue Webpack – mode according to [the staging | production] find corresponding. The env. * files, Again declare NODE_ENV=production in these

  2. Add encrypted Secrets for Actions in Github repository Settings DEPLOY_ORACLE=/usr/share/nginx/html

Deployed to Heroku

  1. Creating the two independent apps staging and Production is different from server deployment. Environment variables are injected into both environments when Webpack is packaged. Both environments need to go through the COMPILATION and packaging process of CI. So it makes no sense to Promote through Pipeline. Here we create two separate apps: [staging-vue3, production-vue3]
  2. Add editing plug-ins for each APP, one more than Node Server, because it is deployed statically
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
Copy the code

And add static.json to the root directory of your project

{
  "root": "dist"."clean_urls": true."routes": {
    "/ * *": "index.html"}}Copy the code
  1. VUE_APP_URL is set at compile time, overwriting axiOS ‘default BASE_URL, which points to the corresponding Node Server. NODE_ENV=production NODE_ENV=production NODE_ENV=production NODE_ENV=production

Deploy to Amazon EC2 with Amplify

Amplify Init is used to create the Amplify application and initialize the Backend

  1. Use the command line to create the Amplify application in the root directory of the projectvue3typescript
amplify init
Copy the code

  1. At the same time, a back-end environment is created, nameddev
  2. Go to the AWS Console, go to Amplify, and go to the one you just createdvue3typescript APP. Connect the Github repository to the corresponding AWS – Staging branch. And select the associated backend servicestaging
  3. Connect the Github repository to the corresponding AWS – Production branch. Create a new back-end environment from the Amplify command lineonline
amplify env add
Copy the code

Then bind in the AWS-Production front-end environment behind Amplifyonline

Create the amplify. Yaml file and modify the build script

version: 0.2
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - nvm use $VERSION_NODE_10
        - node -v
        - if [ "${AWS_BRANCH}" = "aws-staging" ]; then echo "staging branch" && npm run build:staging; elif [ "${AWS_BRANCH}" = "aws-production" ]; then echo "production branch" && npm run build:production; else echo "test branch" && npm run build:mytest; fi
  artifacts:
    baseDirectory: dist
    files:
      - '* * / *'
  cache:
    paths:
      - node_modules/**/*
Copy the code

When pushed to the appropriate branch, Amplify calls the script for compilation, packaging, and deployment

Set environment-specific variables

Here the VUE_APP_URL is atcompileOverride the axiOS default BASE_URL to point to the Node Server. Different branches can also have different valuesNODE_ENV=production NPM ci will not install the module in devDependencies. This will cause NPM run build to fail to find uE-cli-service The Vue Webpack – mode according to [the staging | production]. Find the corresponding env. * files, in these statement NODE_ENV = production again

Install the AWS – Amplify and AWS – Amplify -vue libraries

npm i aws-amplify aws-amplify-vue
Copy the code

Create Amplify Roles

When you create the Amplify APP, it does not appear that the associated roles are automatically createdI created one manually

Cognito and JWT support

SMS login

Configure the Amplify environment, add Auth and Functions

preparation
  1. Projects that do not have Amplify services added, or that are Clone projects, generally run first
amplify init
Copy the code

If you have not set up AWS before, you need to add the AWS command line configuration before

aws configure
Copy the code
  1. View Amplify Status
amplify status
Copy the code

Amplify Amplify env

  • Configuration of back-end service resources
  • Lambda functions
  • After adding the environment,The equivalent ofA Git submodule was created in the project
  • You can create multiple environments, different environmentsThe equivalent ofDifferent Git branches can be passed
amplify env checkout <env-name>
Copy the code

Switch between different environments

  • The configuration can correspond to different backend resources, such as different User pools for Cognito and other permission resources
  • Lambda functions can be shared between different environments (branches)
  • Switching between two completely independent environments can be used if the two environments are completely independent
amplify env checkout <env-name> [--restore]
Copy the code
  • Amplify’s front-end environment can choose from different back-end environment bindings
    • Amplify backend, staging and production front-end environments are bound to the Online backend environment

    • In the local development environment, you can flexibly switch the environment by using the command line interface

Add Auth and Lambda
  1. Add Auth and default Lambda functions
amplify add auth
Copy the code

  1. Manually add a PreSignup Lambda Function
amplify add fucntion
Copy the code

Go to the Cognito User Pool backend and manually bind Trigger

  1. Let vue3typescript360b0231CreateAuthChallenge

Has the authority to send the SNS into the Lambda background page, found under different environment vue3typescript360b0231CreateAuthChallenge function to find the corresponding Role, the Role of the background to add SNS permissions

  1. Configuration of SNS

The front-end transformation