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
{
"hosting": {
"public": "dist"
}
}
firebase.json
と同階層にdist
ディレクトリを作成し、以下のindex.htmlを置く
<h1>Hello Firebase!</h1>
Angular
Angularの学習で単語帳アプリ作ろうと思ってるので
flashcardって名前になってます
今はHello Worldを出すだけのコードです
Parcel
最近話題になったモジュールバンドラー
webpackやFuseBoxと違い設定ファイルが不要です
yarn add --dev parcel-bundler
Hello Worldを出すぐらいのAngular実装であれば、以下のパッケージだけでビルドまでできます
"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-bundler
とtypescript
だけです
Hello World出すだけだと不要ですが、parcel-plugin-typescript
もそのうち必要になるでしょう
"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の記事でも言われてますが、
商用や大規模プロジェクトでの利用は避けたほうがいいでしょう
今回みたいに学習や遊びでやる分にはこれで十分です