LoginSignup
6

More than 5 years have passed since last update.

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

Posted at

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

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の記事でも言われてますが、
商用や大規模プロジェクトでの利用は避けたほうがいいでしょう

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6