8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

『5秒』でTypeScript + React アプリを作り『5分』で全世界に公開する

Last updated at Posted at 2019-09-15

e-Sports専用のクラウドファウンディング・サービス「e-Sports-Funding(仮)」を個人開発したいので、開発環境を整えていきます。技術的には以下を使用する予定で、各技術の導入に際し備忘録もかねて記事にしていきます。

  • TypeScript : 言語
  • React : UI フレームワーク
  • Redux : 状態管理
  • Firebase : バックエンド
  • Firebase Hosting : インフラ
  • Stripe : 決済プラットフォーム

なお、太字部分は本記事で導入します。

TypeScript + React アプリを作成する

  • create-react-appを使ってアプリのひな型を作成

    yarn create react-app e-funding --typescript # サンプルプロジェクトを作成します
    

ここまでで**『5秒』**

Firebase hosting でデプロイする

  • firebase プロジェクトの作成
    firebase.gif

  • firebase の初期設定

    yarn add firebase-tools # firebase まわりをアプリに追加します
    firebase login # firebase が連携するgoogleアカウントを選択します
    firebase init # firebase の動作に必要なファイルを対話式で自動生成します
    

対話への応答は以下

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
     # Hosting: Configure and deploy Firebase Hosting sitesを選択
? What do you want to use as your public directory?
     # buildと入力
? Configure as a single-page app (rewrite all urls to /index.html)?`
     # nと入力
  • firebase Hosting でデプロイ

    yarn build # アプリを公開可能な形に変換します
    firebase deploy # firebase hosting でデプロイします
    

ここまでで**『5分』**

アプリが公開されました🎉

ブラウザで https://[YOUR_FIREBASE_PROJECT_NAME].firebaseapp.com/ にアクセスすると、あなたのアプリが確認できます!
1568531383464.png

ここから先の開発フロー

ここから先は以下のように開発を進めつつ

  1. yarn startでローカルサーバーを立ち上げ
  2. ソースコードを編集しhttp://localhost:3000/で確認
  3. 作業単位ごとに GitHub にプッシュ

機能単位で以下のようにデプロイしていけば良いでしょう

  1. yarn buildでアプリをビルド
  2. firebase deployでアプリをデプロイ

将来的にはmasterへのマージのタイミングで、GitHub からFirebase Hosting に自動的にデプロイできるようにしたいですね(いわゆるCD)

Tips

  • firebaseコマンドを打ち込むとcommand not foundになる

    • パスが通っていないことが原因かもしれません
    • vim ~/.bashrcで以下を追記してください
      • export PATH="XXXXX:$PATH"
      • xxxxxはyarn binで出てくるパスです
  • ちゃんとデプロイしたのに、URLにアクセスするとFirebase Hosting Setup Completeとかいう変な画面が出てくる

    • firebase initbuild/index.htmlを上書きしたことが原因かもしれません
    • firebase init -> yarn build -> firebase deployの順番を守ればこれは起こりません
      1568534158679.png

この他にも、つまづきポイントあったら追加していきたいので、コメントくださいmm

8
7
0

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?