Qiita初投稿です。お手柔らかにお願いします。
1. 初めに
なぜ作ろうと思ったのか
数か月前に、ハンドメイドで衣類や小物などを作る個人レーベルを始めた。
インスタに作品まとめたりはしているけれども、作品とプロフィール、各所リンクをまとめる場所が欲しくなり、さらにデザフェス申し込みをやってみようというところで、いい機会だしさくっと立ててみようと思った。
なぜAWSなのか
Wixやペライチなど、ノーコードで作れるサービスもあったけれど、無料だと機能が限られたりするし、単純に新規で登録するのが面倒で、AWSでなんとかしようと思った。
コストも極力抑えて作りたかった。
2. 技術構成
使ったAWSサービスはこれだけ。
- S3(ファイル置き場)
- CloudFront(CDN)
- Route53(DNS)
- ACM(SSL証明書)
ほかに独自ドメインはお名前ドットコムで取得、Route53に紐づけ済み。
3. 作り方
ざっくりした作り方になっているので、詳細は出てくるキーワードでググってほかのわかりやすい方の記事みてください(他力本願)
0. AWSアカウント作る
アカウント作って、とりあえずRootアカウントとは別のユーザー切ってください。
あと、AWSアカウント 作成後 やること とかでググって設定する。
1. ローカルでHTML + CSSでいい感じにページを作る
今回はindex.htmlだけの1枚ページにした。
デザインは……ほかのポートフォリオサイト参考に必要なものが見やすく載っていればいいかなって感じ。
一応スマホ前提で作った。
簡単なページなので、カンプもワイヤーもすっ飛ばしてコーディング。
ディレクトリ構成はこんな感じ
index.html
|-assets--css/style.css
|-images/画像たくさん
バージョン管理はやりたかったら適当にGitHubにリポジトリ作ってちょこちょこコミットしておく。
2. S3のバケット用意する
名前はわかりやすければなんでもいいです。CloudFrontからのアクセスだけしか受け付けないので。
ブロックパブリックアクセスはすべてオン。
3. CloudFrontにディストリビューションを作る
Freeプランがあるので、それで特にデフォルトから変えずに作る。オリジンに先ほど作ったS3バケットを指定する。
OACでS3と紐づける。オリジンにS3選ぶとたしか自動で作ってくれて、S3側のバケットポリシーも作ってくれた気がする。(記事にすること当時考えておらず、記憶頼りですみません。)
定額プランだと、FreeでもWAFがおまけでついてくるのでありがたく使わせてもらう。
4. CloudFrontの代替ドメインを指定する
出来上がったディストリビューションの管理画面から代替ドメインを指定することができる。
Route53に登録してあるドメインのサブドメインを好きに指定して設定。
5. ACMでSSL証明書取得
ディストリビューション管理画面にACMで証明書取得できるリンクがあるので、そこから設定する。
5. S3にファイルをアップロードする
AWS CLIインストールして、認証情報セットしておく。
AWS CLIでディレクトリを丸ごとアップロードする。.gitディレクトリは除外するのを忘れずに。
# 念のためアップロードされるファイルを確認
aws s3 sync . s3://your-backet/ --exclude "*.git/*" --dryrun
# 本実行
aws s3 sync . s3://your-backet/ --exclude "*.git/*"
6. デフォルトルートオブジェクトを指定する
ディストリビューション編集画面から、デフォルトルートオブジェクトにindex.htmlを指定する。
私はこれを忘れてしばらく403エラーで時間を溶かした。
だいたい完成
アクセスしてみてページが表示されたらゴール。
ここから、Googleにインデックスしてもらうための設定追加したりfavicon追加したりとかしたけど、これでインターネットに自分の作ったページが公開された。
4. コスト
- 独自ドメイン: 年1500円程度
- AWS: Route53 + S3で月0.5ドル程度
独自ドメインでサイト作ろうとしたら、ほかのサービスだとドメイン代以外に月数百円~1000円くらいかかると思うので、だいぶ抑えられたのではなかろうか。
5. メリット
- 安い
- 速い
- メンテほぼいらない
- 万一バズっても安心
- 技術面で詰まったときに参考情報がたくさん
ローコストでとりあえずギャラリー・名刺代わりの公式サイト欲しい！てハンドメイド作家さんやクリエイターのみなさまにおすすめ。
6. 終わりに
小規模レーベルやブランド、クリエイター活動の公式サイト作りにAWS使うのコスト面と安定感でめっちゃいいです。
独自ドメインとればショップカードに書くURLかっこよくなるし、サイト表示速度速ければイベントとかでQR読み込んでお客様が表示するまで一瞬だし。
サイト本体は何の制約もないプレーンなHTML + CSSだから無限にカスタマイズできるし。
無駄に技術のある作家でよかったです。
この記事読んでくださったクリエイター系の方もよかったらトライしてみてください～。
最後に私のレーベルのインスタ載せておきます。作ったもの見たかったらこちらからどうぞ。
fuwariyomi.wear
追記
レーベル名書くの忘れてました。
fuwariyomi(フワリヨミ)です。
ポートフォリオはこちら
fuwariyomi