基于 Typescript 的全棧工程模版 - 前端 Vue3

Weex Clone是基于Tyepscript開發的一套簡單的點餐應用。作為一個全棧開發的完整實例，這個應用包括了基于Node.js和Koa框架的后端實現，也包含了基于Vue3開發的前端工程。這個倉庫是一個完整前端的實現，采用了AWS的Cognito作為用戶的鑒權(Authentication)。除了代碼的實現，也包括了完整的CI/CD的發布流程。前端系統默認部署在Heroku，但是也可以通過Amplify部署在AWS上，或自己搭建的VPS Nginx上。

參考基于 Typescript 的全棧工程模版 - 后端 Node.js + Koa2

用命令行 vue-cli 創建 vue3 的應用框架

安裝或更新 vue-cli

npm install -g @vue/cli

或

npm update -g @vue/cli

創建應用

vue-create-app
vue-select-options

Lint

添加 .prettierrc.js 文件

module.exports = {
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
}

修改 workspace 的配置, ** 一定要重新打開 vscode **

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

運行 npm run lint

編譯打包確認環境變量

Mode 的概念
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",

mode 決定了打包用哪個環境變量文件

.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

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, 例如在 .env.staging 中設置 ** NODE_ENV=production **, 確認打包時可以優化 staging 下的代碼

搭建持續集成和持續部署環境

部署到 Oracle CentOS 8 服務器中的 Nginx 下

配置 Nginx 支持單個端口對應多個二級域名的靜態服務

編輯 /etc/nginx/nginx.conf 支持同一個端口，不同的靜態服務器

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 / {}
}

修改 Cloudflare，添加三條 A 記錄，支持 VPS 的 IP

cloudflare-static
通過 Let's Encrypt 修改 nginx 的 https 支持
安裝 certbot 見 Node Server 的部署

certbot -nginx

certbot-static

2. 編寫 Github Actions 部署腳本

在 .github/workflows 下添加 Github Actions
注意不要添加 NODE_ENV=production，設置了這個后 npm ci 不會 install devDependencies 下的模塊，會導致 npm run build 報錯無法找到 vue-cli-service
Vue 的 Webpack 會根據 --mode [staging | production ] 找到對應的 .env.* 文件，在這些中再聲明 NODE_ENV=production
在 Github 的倉庫設置中，給 Actions 用到的添加加密的 Secrets

github-secrets

DEPLOY_ORACLE=/usr/share/nginx/html

部署到 Heroku

創建 staging 和 production 兩個獨立的 APP
與服務端部署不一樣，兩個環境都是在 Webpack 打包時注入了環境變量，兩個環境都需要走 CI 的編譯打包流程，所以通過 Pipeline 的 Promote 是沒有意義的。我們這里創建兩個獨立的 APP：[staging-vue3, production-vue3]
為每個 APP 添加編輯插件, 因為是靜態部署，比 Node
Server 多了一個插件

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static

并且要添加 static.json 文件在項目的根目錄下

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

在兩個 APP 的設置中綁定關聯的 Github 倉庫和分支
這里的 VUE_APP_URL 是在編譯時候，覆蓋 axios 默認的 BASE_URL，指向對應的 Node Server，不同的分支也可以有不同的 Value
與 Amplify 不同這里要設置 NODE_ENV=production，設置了這個后 npm ci 不會影響 install devDependencies 下的模塊

通過 Amplify 部署到 Amazon EC2

通過 amplify init 創建 Amplify 應用，并初始化對應的 Backend

通過命令行在項目的根目錄下創建 Amplify 的應用, 命名 vue3typescript

amplify init

amplify-init

同時創建了一個后端環境，先命名為 dev
進入 AWS Console，到 Amplify 下，進入剛才創建的 vue3typescript APP。連接 Github 倉庫和對應的 aws-staging 分支。并在關聯的后端服務上選擇 staging
連接 Github 倉庫和對應的 aws-production 分支。通過 Amplify 命令行創建一個新的后端環境 online

amplify env add

然后在 Amplify 后臺的 aws-production 前端環境綁定 online

amplify-env-backend

創建 amplify.yaml 文件，修改 build 的腳本

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/**/*

當推送到對應的分支后，Amplify 會調用這個腳本執行編譯，打包和部署

設置環境相關的變量

amplify-env

這里的 VUE_APP_URL 是在編譯時候，覆蓋 axios 默認的 BASE_URL，指向對應的 Node Server，不同的分支也可以有不同的 Value
注意不要添加 NODE_ENV=production，設置了這個后 npm ci 不會 install devDependencies 下的模塊，會導致 npm run build 報錯無法找到 vue-cli-service
Vue 的 Webpack 會根據 --mode [staging | production ] 找到對應的 .env.* 文件，在這些中再聲明 NODE_ENV=production

安裝 aws-amplify 和 aws-amplify-vue 庫

npm i aws-amplify aws-amplify-vue

創建 Amplify 角色

創建 Amplify APP 時，好像沒有自動創建關聯的 Role, 我手動創建了一個

aws-role-amplify

Cognito 和 JWT 的支持

手機短信登入

配置 Amplify 環境，添加 Auth 和 Functions

前期準備

未添加 Amplify 服務的項目，或者 clone 的項目，一般首先要運行

amplify init

如果沒有設置過 AWS ，之前還要添加 AWS 命令行配置

aws configure

查看 Amplify 狀態

amplify status

Amplify 的 env 對應

后端服務資源的配置
Lambda 函數
添加環境后，相當于在項目中創建了一個 git 的子模塊
可以創建多個環境，不同的環境相當于不同的 git 分支，可以通過

amplify env checkout <env-name>

在不同的環境下切換

配置可以對應不同的后端資源，例如 Cognito 不同的 User Pool，和與之對應的其他權限資源
Lambda 函數可以在不同環境(分支)間共享
如果兩個環境完全獨立，在兩個完全獨立的環境之間切換可以使用

amplify env checkout <env-name> [--restore]

amplify 的前端環境可以選擇不同的后端環境綁定
- 在 Amplify 后臺， staging 和 production 的前端環境，綁定了 online 后端環境
  
  aws-amplify-online
- 在本地的開發環境下，可以通過命令行靈活的切換環境

amplify-backend-env

添加 Auth 和 Lambda

添加 Auth 和默認的 Lambda functions

amplify add auth

aws-amplify-custom-auth-1

aws-amplify-custom-auth-2

aws-amplify-custom-auth-3

aws-amplify-custom-auth-4

手動添加一個 PreSignup Lambda Function

amplify add fucntion

aws-auth-function-presignup-1

去 Cognito 的 User Pool 后臺，手動綁定 Trigger

aws-auth-function-presignup-2

讓 vue3typescript360b0231CreateAuthChallenge
有發送 SNS 的權限
進入 Lambda 的后臺頁面，找到不同環境下的 vue3typescript360b0231CreateAuthChallenge 函數
找到對應的 Role，在Role的后臺添加 SNS 權限

aws-cognito-sns-permision
配置 SNS

aws-sns-profile

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

基于 Typescript 的全棧工程模版 - 前端 Vue3

基于 Typescript 的全棧工程模版 - 前端 Vue3

基于 Typescript 的全棧工程模版 - 前端 Vue3

用命令行 vue-cli 創建 vue3 的應用框架

Lint

編譯打包確認環境變量

搭建持續集成和持續部署環境

部署到 Oracle CentOS 8 服務器中的 Nginx 下

部署到 Heroku

通過 Amplify 部署到 Amazon EC2

通過 amplify init 創建 Amplify 應用，并初始化對應的 Backend

創建 amplify.yaml 文件，修改 build 的腳本

設置環境相關的變量

安裝 aws-amplify 和 aws-amplify-vue 庫

創建 Amplify 角色

Cognito 和 JWT 的支持

手機短信登入

配置 Amplify 環境，添加 Auth 和 Functions

前期準備

添加 Auth 和 Lambda

前端改造

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

基于 Typescript 的全棧工程模版 - 前端 Vue3

基于 Typescript 的全棧工程模版 - 前端 Vue3

用命令行 vue-cli 創建 vue3 的應用框架

Lint

編譯打包確認環境變量

搭建持續集成和持續部署環境

部署到 Oracle CentOS 8 服務器中的 Nginx 下

部署到 Heroku

通過 Amplify 部署到 Amazon EC2

通過 amplify init 創建 Amplify 應用，并初始化對應的 Backend

創建 amplify.yaml 文件，修改 build 的腳本

設置環境相關的變量

安裝 aws-amplify 和 aws-amplify-vue 庫

創建 Amplify 角色

Cognito 和 JWT 的支持

手機短信登入

配置 Amplify 環境，添加 Auth 和 Functions

前期準備

添加 Auth 和 Lambda

前端改造

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频