フロントエンド開発時に便利で利用しているHostingサービスとその他便利なやつを備忘録的にまとめます。
Cloud hosting services
静的なサイトを表示確認する場合に便利。
AWS S3 (https://aws.amazon.com/s3/)
s3-websiteインストール
グローバルモジュールとしてS3用のモジュールをインストールします。
これによりS3への自動デプロイが可能になります。api keyを渡すだけで面倒な作業を一括で行ってくれる便利ツール。api keyはAWSアカウント作成後に取得します。
npm i -g s3-website
.envファイルの作成
次にs3-website用のconfigファイルを準備します。
プロジェクトRootに.envファイルを作成します。
touch .env
このファイルには2つのアクセスキー(AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY )を設定するだけです。これらのキーはAWSサイトでアクセスキーを作成した際に取得できますので、コピペでOKです。
AWS_ACCESS_KEY_ID:xxxxxxxxxxxxxxxxxxx
AWS_SECRET_ACCESS_KEY:xxxxxxxxxxxxxxxxxxx
Deploy
AWS側にデプロイ先のbucketを作成します。この際のbucket名はサービス全体で一意のようですので、被らないようにします。
s3-website create 任意の名前
デプロイします。デプロイフォルダはprojectのビルド先です。
s3-website deploy ビルドフォルダ
これで完了です。コマンド実行後にデプロイ先のURLが提示されますのでアクセス！
Firebase (https://firebase.google.com/)
Hostingのみならず、Cloud Firestore（β版 asof Oct.14, 2018）によるDB機能、画像保存などに便利なCloud Storage, サーバ側での処理に対応したCloud Functionsとサーバエンジニアリングなしでのアプリ開発が可能です。これが無料。
firestoreの利用については別途またまとめます。。
アカウント作成
まずはアカウントを作成し、https://console.firebase.google.com/ にアクセスします。
プロジェクト作成
"プロジェクトの追加"リンクからプロジェクトを作成します。（max 8プロジェクト for free）
firebase-toolsインストール
デプロイしてくれるツールをインストールします。
npm insatall -g firebase-tools
firebase login
文字通りfirebaseにログインします。下記コマンドを叩くとログイン画面がポップアップが開きます。
firebase login
firease init
デプロイの準備をします。
firebase init
必要な機能を選択します。静的サイトの場合Hostingを選択。SPAのようにFirestoreなどのRealtime DBとAPI連携する場合はそちらも選択します。
🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥
🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥
🔥🔥🔥🔥🔥🔥 🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥
🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥
🔥🔥 🔥🔥🔥🔥 🔥🔥 🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥 🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥
You're about to initialize a Firebase project in this directory:
/Users/yossy/Documents/projects/site_test
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select
)
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
作成したプロジェクトを選択
? Select a default Firebase project for this directory: (Use arrow keys)
[don't setup a default project]
❯ my-project (my-project-51779)
[create a new project]
アップロードしたいフォルダを指定します。例はdistフォルダ（default: public）
? What do you want to use as your public directory? (public) dist
SPA等の場合はyesとします。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
これで、プロジェクトフォルダ内に設定が書かれた firebase.json と .firebaserc ファイルが作成されます。
Deploy
以下のコマンドでデプロイが完了します。コマンドの実行後に管理画面URLとホスティングURLが表示されます。
firebase deploy
簡単！！
Surge (https://surge.sh/)
こちらはもっと簡単なHostingサービス。
surgeインストール
npm install -g surge
Deploy
いきなりデプロイです。build先のフォルダを指定して以下のコマンド叩くだけ。
初回はメールアドレスなどの情報を入力する必要があると思いますが、ホント簡単！！
こちらもコマンド実行後にデプロイ先のURLが提供されます。
surge -p dist
Github Pages (https://github.com)
プロジェクトがgithubで管理されているならこちらも便利なHostingサービスです。
GithubではHosting用の特別なbranch名 "gh-pages" があります。まずはこちらを用意します。
gh-pagesブランチ作成
git checkout -b gh-pages
Deploy
Github Pagesではbuildされたフォルダだけをgh-pagesブランチで管理すればOK。
git subtree機能を使ってリモートレポにbuildフォルダ(dist)だけをpushします。
git subtree push --prefix dist origin gh-pages
That's it! これで以下のURLでデプロイしたページが確認できます。
https://<ユーザ名>.github.io/<レポジトリ名>
ダミー画像
placehold.it (via.placeholder.com)
http, https両プロトコルに対応しています。
placehold.it/<横サイズpx>x<縦サイズpx>/<背景色>/<テキスト色>.<拡張子>?text=<テキスト文字>
https://placehold.it/600x200/ddd/444/aaa.jpg?text=dummy
lorempixel.com
こちらもSSL対応。こちらは写真（jpg）をランダムに返してくれます。リロードのたびに違う画像が楽しめます。同サイズの画像を複数集めたいときとか、カルーセルで違う画像を入れたいときとか同URLでまかなえたりします。
https://lorempixel.com/<横サイズpx>/<縦サイズpx>/
HTTP/HTTPSレスポンスサービス (https://httpbin.org)
REST APIなどサーバ側との連携が不可欠なSPAではこのサービスは重宝します。
REST形式でいろいろなタイプのリクエスト・レスポンスを手軽に実現できます。
データをpostして200レスがほしいってときは、https://httpbin.org/postをpostで投げるだけ。
画像アップロードとかまだサーバ側で準備ができていないけどとりあえずエラーなしのレスがほしいとか。。
エラーコードを返すものもあるので各ステータスに応じたエラーハンドリングも楽にできます。
備忘録でした。