見出し画像

エンジニア採用担当がプログラミング頑張る話【44日目/2ヶ月間】

Hiroki Maekawa＠エンジニアヘッドハンター

こんにちは、@hiroki_maekawaです。

今日は、（クオリティは置いておいて）ホームページが何とか公開できるくらいの完成度にはなったので、早速Firebaseに公開していきたいと思います。


1. ReactアプリをFirebaseへ接続

まずは、公開したいアプリをカレントディレクトにします。

その後、コマンドで$ firebase loginと打ち、Firebaseにログインします。

ログインができたら$ firebase initと打ち、Firebaseから聞かれる質問に答えていきます。（初めの質問は「上下キーで選択→スペースキーを押す→エンターキーを押す」手順でいかないとエラーになってしまうので注意）

全ての質問に答え終わると、ディレクトリ内に.firebasercファイルと、firebase.jsonファイルが作られます。

firebase.jsonファイルがは下記のような感じになっていると思うので、

{
 "hosting": {
   "public": "public",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }
}

下記のように編集してあげます。（public→buildに！）

{
 "hosting": {
   "public": "build"
 }
}

これであとは下記コマンドでbuildしてdeployするだけです。

$ npm run build
$ firebase deploy

成功したら✔ Deploy complete!と出てくるので、コメントで指定されたURLにアクセスをしてちゃんと反映できているか確認します。

また、筆者は先日独自ドメインを設定したので、そのURLでもアクセスしてみます。

無事、反映できてました！


2. Reactアプリの編集

何か編集した際は、ファイルを保存した後にbuild→deployすれば反映されました。

背景の画像や文字のフォントなど、また気が向いたら変えてみようと思います！


今日できるようになったこと

・ReactアプリをFirebaseで公開


さいごに

フロントエンド側全くやったことのない状態から、3日間でホームページ公開までできて正直びっくりしてます。これまでWixとレンタルサーバーに毎月3000円くらい払っていましたが、これが0円になったのは嬉しいです(笑)

もし月々維持費をかけて個人でホームページを公開している方がいれば、この機会にプログラミング学習も兼ねてチャレンジしてみるのも良いのではないでしょうか？？

それではまた！

この記事が気に入ったらサポートをしてみませんか？