angular
Firebase
parcel

Angularを簡単にビルドして無料でWeb公開する

FirebaseとAngularとParcelを使って、
Angularで実装 -> ビルド -> デプロイ -> Webサイト公開
まで全部やってみよう

Firebase

「firebase hosting」でググると画像付きで詳しい環境構築が紹介されているので、ここでは省略します

事前に以下を準備する必要があります
■ Nodeをインストール(Yarnを使う場合はYarnもインストール)
■ Googleアカウントの取得
■ 以下のコンソールから新規プロジェクトの作成
https://console.firebase.google.com

firebase-toolsを使えば、以下のコマンドだけで作成したHTMLを公開することができます

yarn global add firebase-tools

firebase login

firebase init
 - 1つ目の選択肢は「Hosting」を選ぶ
 - 2つ目の選択肢は「自分が作ったFirebaseプロジェクト」を選ぶ

firebase deploy
firebase.json
{
  "hosting": {
    "public": "dist"
  }
}

firebase.jsonと同階層にdistディレクトリを作成し、以下のindex.htmlを置く

index.html
<h1>Hello Firebase!</h1>

Angular

https://github.com/kurosame/flashcard

Angularの学習で単語帳アプリ作ろうと思ってるので
flashcardって名前になってます

今はHello Worldを出すだけのコードです

Parcel

最近話題になったモジュールバンドラー
webpackやFuseBoxと違い設定ファイルが不要です

yarn add --dev parcel-bundler

Hello Worldを出すぐらいのAngular実装であれば、以下のパッケージだけでビルドまでできます

package.json
"dependencies": {
  "@angular/common": "^5.1.1",
  "@angular/compiler": "^5.1.1",
  "@angular/core": "^5.1.1",
  "@angular/platform-browser": "^5.1.1",
  "@angular/platform-browser-dynamic": "^5.1.1",
  "rxjs": "^5.5.5",
  "zone.js": "^0.8.18"
},
"devDependencies": {
  "parcel-bundler": "^1.2.1",
  "typescript": "^2.6.2"
}

ビルド関連で必要なのはparcel-bundlertypescriptだけです
Hello World出すだけだと不要ですが、parcel-plugin-typescriptもそのうち必要になるでしょう

package.json
"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html --public-url .",
  "deploy": "firebase deploy"
}

parcel
開発向けのビルドでHMRで起動します

parcel build
本番向けのビルドでminifyしてdist配下にbundleファイルを出力します

今までwebpack.config.jsに色々書いたり、webpack-dev-server使ったりしてたのが嘘みたいですね

webpackとの違いで、デフォルト実行時に.cacheディレクトリができます
おそらくwebpack.DllPluginで作られるmanifest.jsonのような感じで依存性をマッピングしておいて、
コンパイルを高速化するものだと思います

webpackなどより後発のツールだけあって、必要なものがビルドインされているのは良いですね

最後に上のnpm-scriptsの以下を実行して、サイトをデプロイする

yarn deploy

おわり

サイトがちゃんとデプロイされているか確認してみましょう
https://[自分のFirebaseのプロジェクトID].firebaseapp.com

感想

すごいかんたん
モダンなフロントエンドの言語で開発して、Web公開するのはこれが最短ではなかろうか

ただ、他のParcelの記事でも言われてますが、
商用や大規模プロジェクトでの利用は避けたほうがいいでしょう

今回みたいに学習や遊びでやる分にはこれで十分です