Frontend hostingサービスなど

フロントエンド開発時に便利で利用しているHostingサービスとその他便利なやつを備忘録的にまとめます。


## Cloud hosting services

静的なサイトを表示確認する場合に便利。

### AWS S3 (https://aws.amazon.com/s3/)

#### s3-websiteインストール
グローバルモジュールとしてS3用のモジュールをインストールします。
これによりS3への自動デプロイが可能になります。api keyを渡すだけで面倒な作業を一括で行ってくれる便利ツール。api keyはAWSアカウント作成後に取得します。

```bash
npm i -g s3-website
```
#### .envファイルの作成

次にs3-website用のconfigファイルを準備します。
プロジェクトRootに.envファイルを作成します。

```bash
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名はサービス全体で一意のようですので、被らないようにします。

```bash
s3-website create 任意の名前
```

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

```bash
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）

<img width="1007" alt="firebase01.png" src="https://qiita-image-store.s3.amazonaws.com/0/7804/64e05806-ae53-85aa-7ad1-f7e028d09f09.png">

#### firebase-toolsインストール

デプロイしてくれるツールをインストールします。

```bash
npm insatall -g firebase-tools
```

#### firebase login

文字通りfirebaseにログインします。下記コマンドを叩くとログイン画面がポップアップが開きます。

```bash
firebase login
```

#### firease init

デプロイの準備をします。

```bash
firebase init
```

必要な機能を選択します。静的サイトの場合Hostingを選択。SPAのようにFirestoreなどのRealtime DBとAPI連携する場合はそちらも選択します。

```bash
     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

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
```

作成したプロジェクトを選択

```bash
? 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）

```bash
? What do you want to use as your public directory? (public) dist
```

SPA等の場合はyesとします。

```bash
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
```

これで、プロジェクトフォルダ内に設定が書かれた firebase.json と .firebaserc ファイルが作成されます。

#### Deploy

以下のコマンドでデプロイが完了します。コマンドの実行後に管理画面URLとホスティングURLが表示されます。

```bash
firebase deploy
```

簡単！！






### Surge (https://surge.sh/)

こちらはもっと簡単なHostingサービス。

#### surgeインストール

```bash
npm install -g surge
```

#### Deploy
いきなりデプロイです。build先のフォルダを指定して以下のコマンド叩くだけ。
初回はメールアドレスなどの情報を入力する必要があると思いますが、ホント簡単！！
こちらもコマンド実行後にデプロイ先のURLが提供されます。

```bash
surge -p dist
```

### Github Pages (https://github.com)

プロジェクトがgithubで管理されているならこちらも便利なHostingサービスです。
GithubではHosting用の特別なbranch名 "gh-pages" があります。まずはこちらを用意します。

#### gh-pagesブランチ作成

```bash
git checkout -b gh-pages
```

#### Deploy

Github Pagesではbuildされたフォルダだけをgh-pagesブランチで管理すればOK。
git subtree機能を使ってリモートレポにbuildフォルダ(dist)だけをpushします。

```bash
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
```
![dummy.jpeg](https://qiita-image-store.s3.amazonaws.com/0/7804/7da0edf8-87b5-5943-6ad5-fa6f011ed7a6.jpeg)

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

備忘録でした。