フロントエンド開発時に便利で利用している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で投げるだけ。
画像アップロードとかまだサーバ側で準備ができていないけどとりあえずエラーなしのレスがほしいとか。。
エラーコードを返すものもあるので各ステータスに応じたエラーハンドリングも楽にできます。

備忘録でした。