プレビューのためだけにnetlifyを使用中
node v 12.15以上
※バージョンは適宜updateして行ってください。
以下色々コマンド書きますが、理解してから使って欲しいです。何も考えずにコピペするとPC壊れる可能性があります。 わからなければわかる人に聞いてください
※ 初めてgithubを使う場合 以下参考にSSH keyを登録しておくと楽です。 https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh
# 作業用ディレクトリに移動
$ cd {ここは自分が使いやすいようにでOK}
# もし作業用ディレクトリがないならこれがおすすめ
$ cd
$ mkdir work
$ cd work
$ git clone [email protected]:AIESEC-in-Japan/aiesecjp-web.git
時間ある時に… また以下を参考にして、user nameを設定しておいて欲しいです。 https://docs.github.com/en/github/getting-started-with-github/setting-your-username-in-git
git command not found 的なことを言われてしまったら
# brewがつかえるかの確認
$ brew upgrade
# なければこれを参考にインストールしてください homebrew https://brew.sh/index_ja
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ source ~/.bash_profile
# gitが入っているかの確認
$ git --version
# git がなければインストールしてください
$ brew install gitここのコマンドはインテル版のmacを基準にしています。やること自体は変わらないですが、 M1Mac(zshを使っている場合など)では使うコマンドコマンドが異なる可能性があるため、 自分のPCが何を使っているのかを確認してからコマンドを入力してください。
# nodeとyarn のインストール https://classic.yarnpkg.com/en/docs/install/#mac-stable
# https://github.com/nodenv/nodenv
$ brew install nodenv
$ nodenv install 12.15.0
$ nodenv global 12.15.0
$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
$ npm install -g yarn
これでうまく行かない場合…
もしかしたら最初からnodeが入っていて、passの切り替えがうまくできない可能性があります。 ちょっと面倒なのでbrew経由でyarn をつかいましょう
$ brew install yarngit cloneができ,yarnが使えるようになったら
必要なモジュールをインストール。 ※モジュールが追加される度に実施する必要がありますが、その時はなにかしらエラーメッセージが出るのでわかると思います
$ yarn install実際にローカル環境で動かしてみましょう。
$ yarn run devFor detailed explanation on how things work, checkout the Nuxt.js docs.
# js & css
$ yarn lint
# js & css 自動で直せるところ修正
$ yarn lint:fix
# js only
$ yarn lint:es
# js only 自動で直せるところ修正
$ yarn lint:es --fix
# css only
$ yarn lint:css
# css only 自動で直せるところ修正
$ yarn lint:css --fixUIテスト用のツールとしてstorybookを使用しています。
$ yarn storybook開発する時に読んでください
ブランチ戦略はgithub Flow に従います。 この辺、わからなければ調べればいい記事が出てくると思います。 そもそも前提わからない人はこっち
そんなに厳密に守らなくてもいいと思いますが、できれば意識して欲しいです
# 本番環境 リリースversion と一致
master
# 開発していくブランチ
develop
# 新機能追加
feature/{ここは規則ないです}
# ドキュメント
docs/{ここはわかりやすければ}
# バグ修正
bugfix/{任意の文字列}
# 緊急対応（マージ先はmaster）
hotfix/{任意の文字列}
# リリース用（マージ先はmaster）
relase/{Date}
github上でもできますが、基本ローカルのエディタの中で対応してください。
# まずdevelopに戻る
git checkout develop
# 最新のdevelopに更新
git pull
# 作業ブランチへ戻る
git checkout {自分の作業ブランチ}
# コンフリクト解消、最新のdevelop取り込み
git merge develop
このあとコンフリクトしたファイルがこんな感じで表示されるので
Here are lines that are either unchanged from the common
ancestor, or cleanly resolved because only one side changed.
<<<<<<< yours:sample.txt
Conflict resolution is hard;
let's go shopping.
=======
Git makes conflict resolution easy.
>>>>>>> theirs:sample.txt
And here is another line that is cleanly resolved or unmodified.エディタで対象ファイルを開きコンフリクトを解消したら
対象のファイルをgit add してください。
全てのファイルでコンフリクトが解消できたらgit commitをしましょう。
もし英語がたくさん書いてある画面に切り替わったら、何も入力せずにエスケープボタンを押してから:qwで大丈夫です。（これはvimというエディタが開いているだけです。詳しくは調べてみていただきたいです。）Vim初心者に捧ぐ実践的入門
参考 git merge
HPやstatic直下にあるLPをリリースする場合、手順は全く同じです。
- developからreleaseブランチを切る
release/{今日の日付} - ex
release/20220312 - release からmasterに向けたPRを作る
- 余計な差分が入っていないか確認
- 動作確認をしておかしい挙動や表示崩れがないかを確認
- 問題があれば
bugfix/{適当な名前}でブランチを切り修正、releaseに向けてマージする。 - 問題なければPRを作った人以外がapproveをする
- masterにマージ
- Cloudflareでビルド・デブロイが正常に進んでいるか監視
- 問題なく終われば本番環境(
aiesec.jp)で修正が反映されているか確認 - masterからdevelopへPRを切りマージ。developは常に最新の状態にしておく
デプロイにはCloudflare Pageというサービスを使っています。 もともとDNSとしてCloudflareを利用しており、HPには複雑なロジックやバックエンドの処理（永続化）もないので Cloudflare内で完結させる様にしました。
こちらは招待制ですので、権限がない人はISに問い合わせをして権限をもらってください。
開発環境を整える時に使っていただいたyarnコマンド ですが他にもつかう場面がたくさんあります。
とりあえずpackage.jsonに変更が加えられたときはとりえあえずyarnコマンドは実行する必要があると思って差し支えないです。
なんかよくわからないエラーが出てきたらまずはyarn installのコマンドを実行してみてください。
脆弱性の対応でdependabotが頑張ってくれています。 その影響範囲を調べるためのコマンドを紹介します。
$ yarn why ws
yarn why v1.22.10
[1/4] 🤔 Why do we have the module "ws"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
"nuxt#@nuxt#webpack#webpack-bundle-analyzer" depends on it
Hoisted from "nuxt#@nuxt#webpack#webpack-bundle-analyzer#ws"
info Disk size without dependencies: "136KB"
info Disk size with unique dependencies: "164KB"
info Disk size with transitive dependencies: "164KB"
info Number of shared dependencies: 1
✨ Done in 0.74s.このように yarn whyのコマンドを実行すると、影響範囲を出してくれるので、それをみて検証すべき動作を判断すればいいと思います。
以下参考にしてみてください。 yarn,node module周りが壊れた時も同様に対処することができるので覚えていて損はないです。 nuxt upgrade
状況はかわるので、この通りにはなっていないと思うけど 創始者の思想
.
├── assets
│ ├── 2020corporation-logo # ロゴを格納する場所らしい
│ ├── images
│ ├── resetcss # resetcss意外はおかない
│ ├── scss
│ └── videos
├── components
│ ├── about
│ ├── base
│ ├── incoming
│ ├── outgoing
│ ├── privacy-policy
│ ├── safety
│ └── top
├── dist
├── docs # ドキュメント周り
├── layouts
├── middleware
├── pages
│ ├── about
│ ├── incoming
│ ├── outgoing
│ ├── press
│ ├── privacy-policy
│ └── safety
├── plugins
├── static
├── store
└── stories # ここはまだ追加してない
└── assets
ちなみにこのコマンド
tree -d -L 2 -I node_modules | pbcopy