Deploy to Main (#58)

* ✅ typescript でnuxt立ち上げまでできた

* ✅ functions以外はlocal実行できた

* 🔧 情報消した

* ✅ firebase hostingまでできた

* ♻️ github action 修正

* ♻️ action 修正

* ♻️ action修正2

* ♻️ action修正3

* ♻️ action修正4

* ♻️ action修正5

* ♻️ action修正6

* ♻️ action修正7

* ♻️ これで最後は--裏蓮華

* ♻️ これで本当に本当に最後

* 🔧 github action修正

* 🔒 github action env追加

* 🔒 env暗号化して配置した

* 📝 README変更

* 📝 README編集

* 🚀 firebase ssrで本番にdeploy成功

* ✅ emulatorlも完璧

* ♻️ store, api, firebaseコード自体は作成した(疎通テストはしていない)

* ✅ testはしていないが結構いい感じ？

* 🚧 useAsyncがうまく行かない

* 🧪 testコードの漏洩

* ✅ bundleしnuxt startなら接続可能

* ✅ 終わり

* ✅ prettier導入

* ✅ github actions修正

* ✅ jestを設置

* ✅ jest修正

* Create LICENSE

* ♻️ lefthook 追加

* ♻️ gi

* 🚧 修正

* 🚧 lefthook途中

* ♻️ lefthooks

* 🧪 yarn upgradeで更新をかけるためpush

* ✅ lefthook完了

* 👷 github actionにjest追加

* 🧪 github action修正

* ✅ カバレッジ設定

* 🧪 test

* 🧑‍💻 test修正

* ✅ test修正

* ✅ test修正

* 🧪 test修正

* ✅ test修正

* ✅ test修正

* ✨ masonry プルリク作成(action設定)

* 🐛 チュートリアルコンポーネントを消した

* ♻️ sass setupにbranch名を変更した

* 💄 scss導入完了

* 💄 scss & gcpa導入

* 💄 top page一度ここまで

* 🚨 画像を連続で整えた

* ♻️ top page修正中 & works/_slug templateを作成

* 💄 top pageが大体整ってきた

* 💄 とりあえずtop pageのlayoutはほぼ完成

* 📝 create workflow status badge

* 💄 次からはmasonryを入れる

* 🚑 3/21分をとりあえずpush

* 🚧 works pagedemo完成

* ✨ works page作成

* 🚧 works pageほぼ完成

* ✅ works page完了

* ✅ 光る文字を実装した

* ✅ 光る文字終了

* 🚧 svg ライブラリこれから入れる

* ✅ svgを表示成功させた

* ✅ sns icons完成

* 🐛 position fixedに修正

* 🚧 とりあえず途中

* 🚧 とりあえず今日はここまで

* ✅ about page medium content 完成

* 💄 hooper導入完了

* ✅ carousel 終了

* 💄 mixinを作成し少し綺麗にした

* 🚧 about page途中

* 💄 works/slugのデフォを作成

* 💄 かなりの変更料となったため一度close

* 🚧 4/11まで

* ✅ error handler完成

* 🚧 2022/04/12分

* 💄 csr loading 完了

* 🐛 gsap global listener 削除できた

* 💄 コピペの色を変えた

* 💄 about page結構できた

* 💄 レスポンシブのfontを作成

* 🚧 レスポンシブを途中まで

* ✅ vueファイルをtestできるようにした

* 💬 prettier update(vue)もできるようにした

* 💄 謎のlayoutが直った

* 💄 ui修正は一度終わり

* Feature/e2e setup (#27)

* 🚧 e2e test導入

* 📝 update docs

* 💄 logo作成した (#31)

* 📝 issueのtemplateを変更した (#19)

* 📝 issueのtemplateを変更した

* 🚧 2022/04/23分

* ♻️ components廃止した

* 💄 skills pageを作成した

* 🚧 2022/04/25分

* 🚧 gsapがのってきてる

* ✅ footer作成した

* ♻️ 一つ忘れてた

* ♻️ 忘れてた

* Refact/issue32 (#33)

* 🚸 リファクタリング

* ♻️ gitignoreの整理

* ♻️ とりあえずtop page復活

* 🚧 いい感じになってきた

* 🐛 top pageのsp対応した

* ♻️ firebase storage 取得できた

* 🚧 だいぶ変更した

* 🚧 ここ２日間の結晶

* ✅ e2eにレスポンシブ対応させた (#44)

* ✅ e2eにレスポンシブ対応させた

* 📝 docs 整理

* 🚧 animation textのbug修正 (#42)

* 🚧 animation textのbug修正

* 🚧 もう途中

* 💄 about pageの画像を正規にした

* 💄 だいぶリファクトした

* Refact/issue50 (#51)

* 💄 uiリファクトした

* ♻️ gsap logic変更

* 💄 skills page

* Refact/final (#56)

* 💄 gsapのバグを取り除いた

* ⚰️ とりあえずgsapの方向性が決まってきた

* 🚧 gsapの汎用性を上げた

* ✅ header new type

* ✅ vueファイル見直した

* 🚧 スキルページが完成した

* 💄 error追加

* 💄 パラドックス実装

* 🧪 もうとりあえず完成でいいでしょ

* 💚 ci変更

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,11 @@
+# Issue
+<!-- Issueに関連する内容を記載する -->
+
+## 調査内容
+<!-- 調査した場合、URLを記載する -->
+
+## 対応内容
+<!-- 対応した内容 -->
+
+## 備考
+<!-- その他記載することがあれば -->

.github/pull_request_template.md

@@ -0,0 +1,14 @@
+# Vide PULL REQUEST
+
+## 対応内容
+<!-- プルリクに関する対応内容を記載する -->
+<!-- 関連付けられたIssueがある場合、紐付ける -->
+<!-- 「closes #~~」の形式で Issue 番号を記載する -->
+
+closes #xxx
+
+## 注意事項 or 途中のとこ
+<!-- この PR では対応しない内容や、レビューにあたっての留意事項を記載する -->
+
+## 今後やること
+<!-- 今後やることがあれば記載する -->

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,36 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    env:
+      RUN_HOME: 'portfolio-ui'
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node.js.
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.18.0'
+          cache: 'yarn'
+          cache-dependency-path: ${{ env.RUN_HOME }}/yarn.lock
+
+      - name: Install module. & Bundle file create(functions & hosting)
+        run: yarn install --frozen-lockfile && yarn build:pro:functions && yarn build:pro:hosting
+        working-directory: ./${{ env.RUN_HOME }}
+
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VIDE_PRD }}'
+          channelId: live
+          projectId: '${{ secrets.FIREBASE_PROJECT_ID }}'
+          entrypoint: ./${{ env.RUN_HOME }}

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,36 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs: # 各ジョブは仮想環境の新しいインスタンスで実行される。
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    env:
+      RUN_HOME: 'portfolio-ui'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Env Info.
+        run: echo ${{ env.RUN_HOME }}
+
+      - uses: actions/checkout@v2
+
+      - name: Setup node.
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.18.0'
+          cache: 'yarn'
+          cache-dependency-path: ${{ env.RUN_HOME }}/yarn.lock
+
+      # どうやら-nameごとで階層は共有されないらしい
+      - name: Install module. & Bundle file create. & hosting establishment
+        run: yarn install --frozen-lockfile && yarn build:pro:hosting
+        working-directory: ./${{ env.RUN_HOME }}
+
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VIDE_PRD }}'
+          projectId: '${{ secrets.FIREBASE_PROJECT_ID }}'
+          # working directory指定
+          entrypoint: ./${{ env.RUN_HOME }}

.github/workflows/test-actions.yml

@@ -0,0 +1,68 @@
+# pull_requestが送信作成された後、testが実行される
+name: Vide Jest tests.
+
+on:
+  # 手動デプロイの設定
+  workflow_dispatch:
+    inputs:
+      # テストするステージ
+      stage:
+        required: false
+        description: "dev or prd"
+        default: "dev"
+      logLevel:
+        description: 'Log level'
+        required: true
+        default: 'warning'
+  # 以下のブランチにpull_requestが送られるとtestを実行する
+  pull_request:
+    branches:
+      - main
+      - develop
+    # 指定したファイルの変更だけでは実行しない
+    paths-ignore:
+      - '*.md'
+      - 'docs/**'
+jobs:
+  vide_jest_tests:
+    env:
+      RUN_HOME: 'portfolio-ui'
+
+    runs-on: ubuntu-18.04
+
+    defaults:
+      run:
+        working-directory: ${{ env.RUN_HOME }}
+
+    # 上から順に実行される
+    steps:
+
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.refs }}
+
+      # node環境を整備するためgithub製 actionを使用
+      - name: Setup Node.
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.15.4'
+          cache: 'yarn'
+          cache-dependency-path: ${{ env.RUN_HOME }}/yarn.lock
+
+      # node package install
+      - name: Node Package install.
+        run: yarn install
+        # working-directory: ./${{ env.RUN_HOME }}
+
+      # testを実行する
+      - name: Testing with jest
+        run: yarn jest
+        # working-directory: ./${{ env.RUN_HOME }}
+
+      - uses: artiomtr/jest-coverage-report-action@v2.0-rc.3
+        with:
+          working-directory: ${{ env.RUN_HOME }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          package-manager: yarn
+          test-script: yarn coverage:ci

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // IntelliSense を使用して利用可能な属性を学べます。
+  // 既存の属性の説明をホバーして表示します。
+  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/portfolio-ui", // VSCodeで開いているフォルダのパス
+      "preLaunchTask": "nuxt debug" // バックグラウンドで yarn devの準備ができたらブラウザを起動する、という挙動
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  // @see https://zukucode.com/2020/10/eslint-vscode-subdirectory.html
+  // サブディレクトリのeslintが読み込まれない場合があるため
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  // デフォルトのコード整形を無効化
+  "editor.formatOnSave": true,
+
+  // ESLint の Vue.js 設定
+  // "editor.codeActionsOnSave": {
+  //   "source.fixAll.eslint": true,
+  // },
+}

.vscode/tasks.json

@@ -0,0 +1,24 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "nuxt debug",
+      "type": "shell",
+      "isBackground": true,
+      "command": "cd ./portfolio-ui; yarn dev",
+      "problemMatcher": {
+        "owner": "custom",
+        "pattern": {
+          "regexp": "^$"
+        },
+        // 以下はWaiting for file changes が来たら、このタスクは終了。
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "yarn run.*", // yarn run という文字列が出力されるので、それをタスクの開始を示す beginsPattern に指定。
+          "endsPattern": ".*Waiting for file changes.*" // yarn dev でローカルサーバーの準備ができたときに Waiting for file changes という文字が出力されるので、それを "endsPattern" に指定。
+        }
+      }
+    }
+  ]
+}
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Naohito-T
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Makefile

@@ -0,0 +1,141 @@
+# ---------------------------------------------------------------#
+#	  											Variables		 											     #
+# ---------------------------------------------------------------#
+
+# Makefileでの := は simply expanded variable といって一度しか展開されない。
+# = は参照するたびに展開される
+# コマンドの実行を変数に入れるためには
+# @see https://www.nooozui.com/entry/20200129/1580277274
+# debug → $(warning CFLAGS1 = $(FROM_DEPLOY_BRANCH))
+
+# ログの色
+R := \e[31m
+G := \e[32m
+B := \e[34m
+N := \e[0m
+
+# .envrc書き込みパス
+DECODING_FRONT_PATH := dotenv ./env/decrypt/.env.
+
+# ---------------------------------------------------------------#
+#  												Setup Env 													 	 #
+# ---------------------------------------------------------------#
+
+# 暗号化
+# Usage (make env.encrypt ENV=xxx KEY=xxx)
+.PHONY: env.encrypt
+env.encrypt:
+	@make _env.encrypt KEY=$(KEY) INPUT=./env/decrypt/.env.$(ENV) OUTPUT=./env/encrypt/.env.$(ENV)
+
+# 復号
+# Usage (make env.decrypt ENV=xxx KEY=xxx)
+.PHONY: env.decrypt
+env.decrypt:
+	@make _env.decrypt KEY=$(KEY) INPUT=./env/encrypt/.env.$(ENV) OUTPUT=./env/decrypt/.env.$(ENV)
+
+# .envrc 作成
+# Usage (make envrc.create ENV=xxx)
+.PHONY: envrc.create
+envrc.create:
+	@make _env.makerc ENVIRONMENT=$(ENV)
+
+# ---------------------------------------------------------------#
+# 											firebase Emulator 											 #
+# ---------------------------------------------------------------#
+
+# Docker Down
+.PHONY: down
+down:
+	docker-compose down
+
+# firebase Emulator local setup
+.PHONY: up
+up:
+	docker-compose down; docker-compose up -d
+
+# Dockerfileを書き換えたあとに実行する
+.PHONY: build
+build:
+	docker-compose build firebase
+
+# 起動後、firebaseにログインする
+.PHONY: exec
+exec:
+	docker-compose exec firebase bash
+
+# login
+.PHONY: login
+login:
+	docker-compose exec firebase firebase login --no-localhost
+
+# Usage : firebase emulators:start --only firestore ○
+# Usage : firebase emulators:start --only functions ×
+# Usage : firebase emulators:start --only auth ○
+.PHONY: only.start
+only.start:
+	docker-compose exec firebase firebase emulators:start --only $(SERVICE)
+
+
+# データのExport/Import
+# firebase emulators:export ./data/export_my_data -P default
+# firebase emulators:start -P default --import=./data/export_my_data
+
+# 自動auto exportのdataの場所を決めたい
+.PHONY: auto.export
+auto.export:
+	docker-compose exec firebase emulators:start --import=path/to/export --export-on-exit
+
+
+# ---------------------------------------------------------------#
+#  													Deploy											 	 	 		 #
+# ---------------------------------------------------------------#
+
+# 基本 github actionでdeployするように設計されているため以下コマンドはhotfix用
+
+.PHONY: deploy
+deploy:
+	@make _deploy
+
+
+# ---------------------------------------------------------------#
+#  													Function											 	 	 	 #
+# ---------------------------------------------------------------#
+
+# 基本 github actionでdeployするように設計されているため以下コマンドはhotfix用
+_deploy:
+	@printf '${B}%s\n' "# deployを開始します。";\
+	cd portfolio-ui;\
+	yarn build;\
+	yarn deploy;
+	@printf '${B}%s\n' "# deploy完了しました。";\
+
+
+# 暗号化 method
+_env.encrypt:
+	@if [ -n "$(KEY)" ]; then\
+		openssl aes-256-cbc -e -in $(INPUT) -pass pass:$(KEY) | base64 > $(OUTPUT);\
+		printf '${B}%s\n' "# 鍵を暗号化し配置しました。→→$(OUTPUT)";\
+	else\
+		printf '${R}%s\n' "# you need define KEY.\nyou need read README.md.";\
+	fi
+
+# 復号化 method
+_env.decrypt:
+	@if [ -n "$(KEY)" ]; then\
+		cat $(INPUT) | base64 -d | openssl aes-256-cbc -d -out $(OUTPUT) -pass pass:$(KEY);\
+		printf '${B}%s\n' "# 鍵を復号化し配置しました。→→$(OUTPUT)";\
+	else\
+		printf '${R}%s\n' "# you need define KEY.\nyou need read README.md.";\
+	fi
+
+# .envrc 作成method
+# 最初の > で.envrcを必ず上書きします。
+_env.makerc:
+	@if [ -n "$(ENVIRONMENT)" ]; then\
+		printf '${B}%s\n' "# envを.envrcに記載";\
+		echo ${DECODING_FRONT_PATH}$(ENVIRONMENT) > .envrc;\
+		direnv allow;\
+		printf '${B}%s\n' "# $(ENVIRONMENT)用の.envrcを作成。\n.envrc done";\
+	else\
+		printf '${R}%s\n' "# you need define ENVIRONMENT.\nyou need read README.md.";\
+	fi