Frontend 知ってて便利なツールやサイトの紹介

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

firebase01.png

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

dummy.jpeg

lorempixel.com

こちらもSSL対応。こちらは写真（jpg）をランダムに返してくれます。リロードのたびに違う画像が楽しめます。同サイズの画像を複数集めたいときとか、カルーセルで違う画像を入れたいときとか同URLでまかなえたりします。
https://lorempixel.com/<横サイズpx>/<縦サイズpx>/

randomuser.me

HTTP/HTTPSレスポンスサービス (https://httpbin.org)

REST APIなどサーバ側との連携が不可欠なSPAではこのサービスは重宝します。
REST形式でいろいろなタイプのリクエスト・レスポンスを手軽に実現できます。

データをpostして200レスがほしいってときは、https://httpbin.org/postをpostで投げるだけ。
画像アップロードとかまだサーバ側で準備ができていないけどとりあえずエラーなしのレスがほしいとか。。
エラーコードを返すものもあるので各ステータスに応じたエラーハンドリングも楽にできます。

ダミーデータ

Faker.js

いろいろなダミーデータを生成してくれる優れもの。POCなどで素早くモックを作成する場合に重宝します。locale対応も充実しているので他言語での応用も容易に可能なところもいいですね。

Demo

備忘録でした。

Related Posts