本内容は合計4つの記事で構成されています。普段エンジニアの皆さんは、業務用に新しいライブラリやツールを調べたり、趣味で新しい言語やフレームワークを使ってサンプルアプリを作ってみる方は多いと思います。エンジニアになって歴は浅いものの、私も例に違わず、業務前後や休日を使って趣味の延長でコードを書いていました。ある日、ふと自分のGitHubリポジトリを見返してみると、それなりに多くの"インプットの跡"に気づきました。"使えそうなプロジェクトを合体"してみれば、それなりのボリュームにもなるし、何よりGitHubの藻屑となりえたこの子達にも少しは光が当たるのでは...」という考えに至りました。上記が本記事作成の背景です。お見苦しい内容ではありますが、エンジニア転職や個人開発、同スタックを用いたアプリケーション開発の参考になれば幸いです。その時々の個別コンテキストによって生み出された複数のプロジェクトたちを、半ば強引に統合した形ではあるため、寛大なお心でご覧ください。対象となる読者は、以下を想定しています。メインとなっています。そのため文量の兼ね合いもあり、実際のコードをかなり割愛して説明しています。読み進めて頂ける方は、ぜひGitHubよりプロジェクトをクローン頂き、その都度お手元で確認頂けると嬉しいです。ハンズオンで作成できるアプリケーションの概要よくあるTODOアプリというかTwi○terの紛いものような、非常にシンプルなサンプルアプリです。本番環境はAWS(ECS/CodePipeline)を利用しています。本記事ではドメイン取得、並びにALBとの紐付けまで紹介します。最終的にAWSへデプロイを行い、ドメイン指定でアクセスできるところまで行っていきます。合計で以下3つの記事で構成されます。為、この記事を作成している筆者のローカル環境を以下に掲載しておきます。GoLandご注意くださいWindowsやIntelチップ製のMacでの動作検証は行っておりませんのでご容赦ください。上述の通り、文量の兼ね合いから全てのコードを一行ずつ説明することはできません。したがって、お手元のローカル環境にgithubよりクローンをして不足箇所は都度ご確認いただけると幸いです。git@github.com:WebEngrChild/next-graphql-front.gitnext-front-appにおいて、VsCodeでは以下のようなエラーが発生する場合があります。画像を参考にワークスペースで指定されているTypeScriptのバージョンを許可頂くと解消されます。mkcertを用いたSSLサーバ証明書発行mkcertというライブラリを使うと、簡単に証明書を発行してhttps環境を構築することができます。本実装はnext-front-appに設定ファイルがあります。localhostここではnginxをリバースプロキシサーバーとして配置しております。http://localhost:3000API※API側は別途【Go編】にて説明いたしますので、ここでは説明を割愛いたします。一覧画面に遷移できたら完了です。