SvelteKitで作成したアプリをAmplifyでデプロイしてみた
株式会社ネクストビートで「おもてなしHR」という地方創生に関わる、宿泊業界に特化した転職支援プロダクトの開発をしております、清水琢巳と申します。
今回は弊社の夕学という制度を活用して、SvelteKitで作成したアプリをAmplifyを使用してデプロイしたことを紹介したいと思います。
夕学とは株式会社ネクストビートの開発部に整備されている福利厚生の一つで、エンジニアが業務時間内に自己学習できる時間です。個人学習の時間がメインですが、不定期で勉強会も開催されています。
アジェンダ
- SvelteKitとは
- Amplifyとは
- SvelteKitのアプリを作成
- GithubにRepositoryを作成しアプリをPush
- AmplifyとRepositoryを接続して自動でデプロイ
- エラー解消
- まとめ
- 参考資料
1. SvelteKitとは
Svelte上に構築された、Webアプリ開発フレームワークです。とてもシンプルにコードを書け、サクサク・ぬるぬる動作してくれるので、ストレスなく開発することができます。また、他言語よりもキャッチアップコストがかからない印象があり、初学者でもとても学びやすい点も人気が高い理由の一つです。公式ドキュメントにはチュートリアルも用意されているため、Svelte？SvelteKit？何それ？という方はそちらをご覧ください！[1]
2. Amplifyとは
Amplifyはフルスタックアプリケーションを自動でデプロイ、ホスティングしてくれるAWSサービスです！たった数回のクリックで、自作作成したWebアプリケーションを全世界に公開することができるためAWS初学者の私でも簡単に利用することができました。
また、プレビューやアクセスコントロールも設定できるため、webアプリケーションの開発する上で必要となる環境を簡単に整えることができるのはAmplifyの魅力だと思います。[2]
3. SvelteKitのアプリを作成
早速アプリを作成してAmplifyに公開していきましょう！
まずはAmplifyにデプロイするためのSvelteKitのアプリを構築します。
以下を実行してSvelteKitのデモアプリを構築します。
http://localhost:5173にアクセスして以下のように表示されれば完了です。
4. GithubにRepositoryを作成しアプリをPush
作成したアプリをGithubにアップロードするためのRepositoryを新規作成いたします。
4.1 リポジトリ作成する
4.2 作成したアプリにてgitを初期化し、Pushする
以下のようになっていれば完了です。
5. AmplifyとRepositoryを接続して自動でデプロイ
5.1 AWSのコンソールで、Amplifyを選択し、新しいアプリケーションを作成する。右上のウェブアプリケーションをホストを選択する。
5.2 ホストしたいリポジトリがあるサービスを選択する。今回はGithubを想定しているため、Githubを選択し、作業を続行する。
5.3 ホストするリポジトリと、ブランチを選択し、次へ進む。
5.4 ビルド設定はまだ特にいじらずに、Amplifyが全てのファイルを自動的にデプロイすることを許可し、次へ進む。
5.5 保存してデプロイする。
以下のようにプロビジョン〜デプロイが緑色になると完了です。
URLにアクセスして、アプリを見てみましょう。
あれ…見つからない…?
実はこのままではアプリは見れません😅
6. エラー解消
なぜ見れていないのか調べてみたところ、Amplifyが見ているディレクトリ（baseDirectory）にindex.htmlファイル存在していないことが原因なようです。
そのためエラーを解消するには、SvelteKitのビルド設定と、Amplifyのビルド設定（baseDirecotry）の設定を揃える必要があります。
6.1 SvelteKitのAdapterを設定する。
Svelteの公式サイトによると、Svelteはデプロイする前に環境に合わせてadapterというプラグインを設定する必要があるようです。[3]
6.2 amplifyのビルド設定を追加・編集する。
実はamplifyのビルド設定時にはスルーしましたが、amplifyのビルド設定はダウンロードして、カスタマイズすることができます。
ダウンロードしたamplify.ymlのbaseDirectoryをSvelteKitのビルド設定に合わせて、buildディレクトリ配下のindex.htmlを見に行くように変更します。
ここまで設定できたら、GithubにPushしてみましょう。
Amplifyは自動的に接続先のリポジトリのブランチの変更を検知して自動でデプロイしてくれます。
デプロイが完了したら、URLにアクセスしてみましょう！！
https://develop.d2e38588w4qs62.amplifyapp.com/
できました！
7. まとめ
上記のようにAWSのAmplifyは数クリックで、自作したWebアプリケーションを全世界に公開することが可能です。ビルド設定を揃えなければならないという点に関しては少し知識がないと気付けない部分で私も戸惑いましたが、かなり直感的に操作することができる所はすごくこのサービスの魅力だと感じました。
今回はアプリを構築してデプロイするのみでしたが、プレビュー機能や、アクセスコントロール、バックエンド構築など、さまざまな機能もカスタマイズすることができるので、ぜひ活用してみてください。
8. 参考文献
[1] https://kit.svelte.jp/
[2] https://aws.amazon.com/jp/amplify/
[3] https://kit.svelte.jp/docs/adapters
[4] https://qiita.com/ryotaro76/items/15c8f56b30eca0cd0ba0
9. 告知
We are hiring!
本記事をご覧いただき、ネクストビートの技術や組織についてもっと話を聞いてみたいと思われた方、カジュアルにお話しませんか？
・今後のキャリアについて悩んでいる
・記事だけでなく、より詳しい内容について知りたい
・実際に働いている人の声を聴いてみたい
など、まだ転職を決められていない方でも、ネクストビートに少しでもご興味をお持ちいただけましたら、ぜひカジュアルにお話しましょう！
🔽申し込みはこちら
https://hrmos.co/pages/nextbeat/jobs/1000008
また、ネクストビートについてはこちらもご覧ください。
