【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ④（フェーズ３. 振り返り）

この記事は、「[ゼロからAWS/Terraform/Nuxt.js/Rubyを学習し始めると、ポートフォリオのリリースまでにどのような過程を踏むことになるのか？][1]」 の補足記事です。
[1]:https://qiita.com/wonderglot/items/cf0d4faa77b925960802

ツイートを複数埋め込んでいるため非常にページが重いです。<b>（2021年8月7日現在、執筆途中）</b>





|本記事|
|:-----------|
|「[ゼロからAWS/Terraform/Nuxt.js/Rubyを学習し始めると、ポートフォリオのリリースまでにどのような過程を踏むことになるのか？](https://qiita.com/wonderglot/items/cf0d4faa77b925960802)|

|補足記事|
|:-----------|
|[【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ②（フェーズ１. インフラ）](https://qiita.com/wonderglot/items/86b90d3e6f03988c5160)|
|[【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで③（フェーズ２. フロントエンド・バックエンド）](https://qiita.com/wonderglot/items/1f709cf35ae828b0f6dd)|






##ER図に色を使おう（Before/After）
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Rails × AWS × CircleCI 34日目<br><br>ER図レベルアップ。見てほしい 昨日のアレとは違うとこ🤔よしドンドンいくよ ↗️<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/KGOpgWykeL">pic.twitter.com/KGOpgWykeL</a></p>&mdash; Kent@Rails×AWSでPF作成中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1373489981881131009?ref_src=twsrc%5Etfw">March 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際、面接をしてくださる方々は、インフラ構成図とER図を見て、「なるほど」と。Githubのコードを読むことに時間を使うかどうか考える。入り口の部分を丁重にしたい。






##何度だってエラーにぶつかろう
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Rails × AWS × CircleCI 42日目<br><br>CircleCI のキャッシュ処理完了🔥<br><br>実行時間 Down↓<br>試行回数 UP↑<br><br>試行してたくさん失敗したから、Gmail は Failed の通知で埋もれたよ ✉️✉️✉️<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/mQPuDG5CzD">pic.twitter.com/mQPuDG5CzD</a></p>&mdash; Kent@Rails×AWSでPF作成中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1376496280524890113?ref_src=twsrc%5Etfw">March 29, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


s![Screen Shot 2021-06-14 at 21.12.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335807/3ed5d84e-a353-dc2a-6224-a0945385e9f2.png)

こういうリアルを教えてくれる情報を僕は知りたかったんだけど、
初心者なりにCircleCIで何度も試行を重ねて頑張ってみたら、
最終的なパイプラインは500本を超えていたし、タスクも2000回を超えていた。
100回も失敗したら諦める人がいるかもしれないけど、
何回失敗したら諦めるだとかそんな悲しいこと言わないで、どうか戦い続けてほしい。




##エラーを解いた分だけ力になる。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Rails × Nuxt.js × AWS 59日目<br><br>強烈な自戒。<br><br>フロントエンドとバックエンドの連携を破綻させて詰んだ。エラー解決するまでに丸１日。<br><br>でも結局、サーバーログに答えがあった。読むのサボったな…。今後はエラー発生したら第一にチェックするぞ…<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/QUt3HXcDFD">pic.twitter.com/QUt3HXcDFD</a></p>&mdash; Kent@Rails×AWSでPF作成中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1382648415008354304?ref_src=twsrc%5Etfw">April 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Fargate 情報不足で苦しすぎる…。デバッグするためのログが手に入らないし、突然デプロイできなくなるし、いろいろエグイ😭<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/wy9VkSGRpz">pic.twitter.com/wy9VkSGRpz</a></p>&mdash; Kent@Rails×AWSでPF作成中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1397866073236541441?ref_src=twsrc%5Etfw">May 27, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

僕はエラーログが表示されないFargateに苦しんだ。

FargateはCloudWatchを使ってログを抽出するのだけれど、
ログの取得の仕方がわからないまま、突入するかもしれない。
それでも
これまで戦ってきたエラーの経験が最終フェーズで生きることになる。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">エラー500 半分解決❗️<br>フロント-バックを疎通させたけど、本番環境で画像が読み込まれない😭<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/KPPDmBGZzM">pic.twitter.com/KPPDmBGZzM</a></p>&mdash; Kent@Rails×AWSでPF作成中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1399254609567248386?ref_src=twsrc%5Etfw">May 31, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


解決にこぎつけていて、周知の通り、コンテナデプロイを達成することができた。





###もっと早くに気がついておけば良かったと思うこと
##69日目　　早めにESLintとRubocopを導入しよう。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Rails × Nuxt.js × AWS 70日目 <br><br>[ ✔︎ ] ESLint &amp; Rubocop<br><br>コマンド一撃 ーー<br><br>全コードに自動修正アタック❕MMMM… もう手作業はいらない。<br><br>（昨日の作業って、実は ESLint なら 500倍速く終わってたな🍵 自分よ安らかに😇）<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/OeaK7uGAbq">pic.twitter.com/OeaK7uGAbq</a></p>&mdash; Kent@Rails×AWSでPF作成中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1386527748726804483?ref_src=twsrc%5Etfw">April 26, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##74日目
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Rails × Nuxt.js × AWS 74日目<br><br>[ ✔︎ ] Rubocop &amp; ESLint<br><br>Lint でエラーを一掃 🧹💨<br><br>1000箇所くらいあったけど、Webアプリの隅々までスッキリしてやったさ。<br><br>たまに Qiita 書いてます。見てね🙃<a href="https://t.co/GX5ck91g4k">https://t.co/GX5ck91g4k</a><a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/JveSAdictv">pic.twitter.com/JveSAdictv</a></p>&mdash; Kent@Rails×AWSでPF作成中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1388061936600768513?ref_src=twsrc%5Etfw">April 30, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

早めにリーダブルコード　と　VSCodeを取り込もう。

####39日目
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Rails × AWS × CircleCI 39日目<br><br>VS Code 参戦😁<br><br>Terminal でインフラいじってたけど、<br>VS Code でフロントいじることにしよう。便利。<br><br>でもフロントわからなくてキツい…💧 １ヶ月前の、Gemfile って何それ状態に近い。早く、抜けたいな、<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/tLcMV2lXn9">pic.twitter.com/tLcMV2lXn9</a></p>&mdash; Kent@Rails×AWSでPF作成中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1375338282695856129?ref_src=twsrc%5Etfw">March 26, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Rails × AWS × CircleCI 39日目②<br><br>午前中のわからない状態をひとまず突破。<br>Nuxt.js × Vuetify はじめの一歩だ。<br><br>努力の方向性が合っていれば、あっという間😌 怠惰にならないように、頭を使っていこう。<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/uk8XlsjeB4">pic.twitter.com/uk8XlsjeB4</a></p>&mdash; Kent@Rails×AWSでPF作成中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1375388637227970563?ref_src=twsrc%5Etfw">March 26, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



####52日目　リーダブルコード
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Rails × Nuxt.js × AWS 52日目<br><br>[ ✔︎ ] 命名規則に従って、リーダブルコードへ<br>[ ✔︎ ] Componentsを分解し、ツリー構造に<br><br>&gt;&gt;&gt; 結果：エラー回避向上。開発速度アップ。<br><br>地味、でも大事なこと。いずれバンッと跳ねられるはず。地道に行こう🐁<a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/b1P5IqOIAm">pic.twitter.com/b1P5IqOIAm</a></p>&mdash; Kent@Nuxt×AWSで転活中 (@kent_0n) <a href="https://twitter.com/kent_0n/status/1380088676424642561?ref_src=twsrc%5Etfw">April 8, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<hr>

|本記事|
|:-----------|
|「[ゼロからAWS/Terraform/Nuxt.js/Rubyを学習し始めると、ポートフォリオのリリースまでにどのような過程を踏むことになるのか？](https://qiita.com/wonderglot/items/cf0d4faa77b925960802)|

|補足記事|
|:-----------|
|[【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで③（フェーズ２. フロントエンド・バックエンド）](https://qiita.com/wonderglot/items/1f709cf35ae828b0f6dd)|
|[【補足記事】ゼロから３ヶ月半でモダンなポートフォリオ (Fargate/Terraform/Nuxt.js/Ruby) をリリースするまで ④（フェーズ３. 振り返り）](https://qiita.com/wonderglot/items/3cbfd4f4b0d4058bab9e)|