# 專案設定 # Gitlab 開新專案 ## 流程 點擊 New project 選擇 Create blank project 項目配置： - Initialize repository with a README - 不勾選，建立時不會自動產生README --- # vite + vue3 使用 yarn ``` yarn create vite ``` --- # Eslint + Prettier ## Eslint ``` yarn add eslint // 安裝 yarn eslint --init // 設定eslint ``` 設定內容(設定完自動產生 .eslintc.cjs) >[安裝,設定 Eslint Ithome](https://ithelp.ithome.com.tw/articles/10302190) - How would you like to use ESLint? - To check syntax, find problems - What type of modules does your project use? - JavaScript - Which framework does your project use? - Vue - Does your project use TypeScript? - Yes - Where does your code run? - browser - How would you like to define a style for your project? - Which style guide do you want to follow? - standard-with-typescript - What format do you want your config file to be in? - JavaScript ( JSON也行 ) - Would you like to install them now? - yes - Which package manager do you want to use? - yarn #### 修正.eslintrc.cjs ``` javascript module.exports = { env: { browser: true, es2021: true, node: true //新增此項 module.exports需透過node處理 }, ``` ### 新增lint指令 ``` javascript scripts: { "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix" }, ``` 需修正 1. eslint看不懂 *.vue文件 ``` javascript // .eslintrc.cjs module.exports = { parser: 'vue-eslint-parser', parserOptions: { ecmaVersion: 'latest', sourceType: 'module', // 與parser對調後 parser: '@typescript-eslint/parser', //與sourceType對調後 }, } ``` 2. "{} 不能當作一個類型" ``` javascript // .eslintrc.cjs module.exports = { rules: { '@typescript-eslint/ban-types': [ // 關閉錯誤(error)：不要以 {} 當作一個類型 'error', { extendDefaults: true, types: { '{}': false, }, } ], } } ``` ``` yarn run lint ``` 建立 .eslintignore 輸入 /dist 在npm run lint 不會檢查 dist 檔案 ### 安裝 vite-plugin-eslint ``` // 用於vite運行時自動檢測eslint規範 可以不裝,在yarn dev不會主動檢查程式碼 yarn add vite-plugin-eslin ``` 引入 ``` javascript // vite.config.ts import eslintPlugin from 'vite-plugin-eslint' export default defineConfig({ plugins: [ vue(), eslintPlugin({ include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'] }) ] }) ``` ## Prettier ``` yarn add prettier -D yarn add eslint-config-prettier -D yarn add eslint-plugin-prettier -D ``` ### Prettier設定： 在根目錄 新增 .prettierrc.cjs ``` javascript // 設定內容 module.exports = { // 一行字符數量默認為80,超過換行 printWidth: 80, // 一個tab代表幾個空格數,默認為80 tabWidth: 2, // 是否使用tab進行縮減,默認為false,表示用空格進行縮減 useTabs: false, // 字符串是否使用單引號,默認false, 使用雙引號 singleQuote: true, // 行為使否使用分號, 默認是true semi: false, // 是否使用逗號, 三種值<none|es5|all> trailingComma: 'none', // 對象大括號是否有空格,默認是true, ex: { foo: bar } bracketSpacing: true } ``` ### 設定.eslintrc.cjs ``` javascript extends: [ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended' ], ``` ### 設定package.json 格式化指令 ``` javascript "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"", ``` ``` yarn run format ``` --- # FireBase >[deploy hosting 文件參考](https://hackmd.io/@c36ICNyhQE6-iTXKxoIocg/S1IlvNoNI) ## 安裝 SDK(可以暫時略過) 專案安裝 fireBase SDK ``` yarn fireBase ``` 根目錄下的 .gitgnore 裡新增 ``` .fireBase ``` ## 操作 ### FireBase 網站 進入hosting 點擊開始使用 ## 設定 Firebase Hosting ### 安裝Firebase CLI 全域安裝 firebase-tools ``` npm install -g firebase-tools ``` ### firebase 登入 准許 firebase 的執行授權 ``` firebase login ``` ### firebase 設定 ``` firebase init ``` ### 選擇Hosting - Which Firebase features do you want to set up for this directory - Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys (Firebase 託管和（可選）設置 GitHub Action 部署) - What do you want to use as your public directory? - 輸入dist(deploy dist 資料夾) - Configure as a single-page app (rewrite all urls to /index.html)? - 選擇 Yes ( vue 或 react 這類的 SPA 頁面選擇 Yes) ### 打包build (打包完dist資料夾更新後即可部署) ``` yarn build ``` ### firebase 部署 ``` firebase deploy ``` --- # CI/CD ## Gitlab Runners 前往專案 選擇 Settings 選擇 Settings 底下的CI/CD 將 **Runners** 打開(github 的Action ＝ Runners) 下方按鈕點選開啟 ## FireBase 專案總覽 點開選擇 專案設定 選擇服務帳戶 下方可以建立新的金鑰 ## Gitlab Variables 前往專案 選擇 Settings 選擇 Settings 底下的CI/CD 將 **Variables** 打開 新增 **Variable** ``` Key: FIREBASE_TOKEN Value: 金鑰 Type: Variable ``` ## .gitlab-ci.yml 在專案根目錄新增 ``` .gitlab-ci.yml ``` 用於上傳gitlab時會讀取此檔案裡面的 command line ``` javascript //基本建立 build: stage: build only: - main // 分支名稱 image: node:16.20.0 // 映像檔 environment: name: $CI_COMMIT_BRANCH // gitlab指令 artifacts: paths: - dist // 資料來源路徑 script: // 將會執行的指令 - yarn install - yarn lint - yarn build deploy to firebase main hosting: tags: - first-runner stage: deploy only: - main dependencies: - build image: rambabusaravanan/firebase environment: name: $CI_COMMIT_BRANCH script: - firebase target:apply hosting <project-name> <project-name> --project=<project-name> - firebase deploy --only hosting --token $FIREBASE_TOKEN ``` ## 失敗問題 - Error: Failed to get Firebase project test. Please make sure the project exists and your account has permission to access it 錯誤：無法獲取 Firebase 項目項目名稱。請確保該項目存在並且您的帳戶有權訪問它 >[stack overflow](https://stackoverflow.com/questions/63473787/error-failed-to-get-firebase-project-project-name-please-make-sure-the-project) 方法： ``` // 重新登入 firebase logout firebase login ``` - Authenticating with `--token` is deprecated and will be removed in a future major version of `firebase-tools`. Instead, use a service account key with `GOOGLE_APPLICATION_CREDENTIALS`: 錯誤：當使用firebase login:ci認證時 顯示 已棄用 --token 進行身份驗證 方法：改用上方CI/CD方式 --- # Makefile 在根目錄新增 **Makefile** 檔案 ``` BASE_URL=/ .PHONY: install install: yarn install .PHONY: gen-version //版本號 gen-version: echo "export const version = '$(shell date +%Y-%m-%d.%H%M)'" > ./src/assets/version.ts .PHONY: build //打包 build: make gen-version rm -rf ./dist yarn build --base=$(BASE_URL) .PHONY: deploy //部署 deploy: make build firebase deploy --only hosting,firestore .PHONY: run run: yarn run dev .PHONY: up up: docker compose -p ntnu-tutoring-platform -f docker-compose.yaml up -d .PHONY: down down: docker compose -p ntnu-tutoring-platform -f docker-compose.yaml down ``` ## 版本號 在src/assets/ 底下新增 version.ts ``` typescript // version.ts export const version = '2023-xx-xx.xxxx' ``` ## gitgnore 裡面添加 ``` /／ 不用版控的檔案 src/assets/version.ts ``` --- # 專案 FireBase 設定 ## 註冊應用程式 ## 開啟FireStore DataBase 前往FireBase網站 前往FireStore DataBase新增資料庫 --- # Docker --- # Emualtors ``` ``` ``` ``` ---