Frontend hostingサービスなど（随時更新）

Frontend hostingサービスなど（随時更新）:

フロントエンド開発時に便利で利用している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 任意の名前 

デプロイします。デプロイフォルダはwebpackでのビルド先です。

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/bitflyer/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で投げるだけ。

画像アップロードとかまだサーバ側で準備ができていないけどとりあえずエラーなしのレスがほしいとか。。

エラーコードを返すものもあるので各ステータスに応じたエラーハンドリングも楽にできます。

備忘録でした。