筆者はアルバイトの関係でHerokuにReactのwebアプリをよくdeployしています．
以下のようなpipelineで構成しています．
stg-masterにマージしたら自動でstgにデプロイされます．
またmasterにマージされたら自動でmasterにデプロイされるような構成です．
stg環境をexperiment環境として，開発者が自由にコードを試せるようにしています．
ここにdeployするときは
git push heroku feature-#***:master
のように今使っているブランチをpushしてdeployしております．
このコマンドで何が起こっているかを追ってみました．
$ git push heroku feature-#216:master Enumerating objects: 9, done. Counting objects: 100% (9/9), done. Delta compression using up to 4 threads Compressing objects: 100% (5/5), done. Writing objects: 100% (5/5), 463 bytes | 463.00 KiB/s, done. Total 5 (delta 4), reused 0 (delta 0)
まずherokuにpushします．
するとおそらく，前回のcommitからの差分をみてそれがherokuに渡されます
remote: Compressing source files... done. remote: Building source: remote: remote: -----> Building on the Heroku-20 stack remote: -----> Node.js app detected remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: USE_YARN_CACHE=true remote: NODE_VERBOSE=false remote: NODE_ENV=development remote: NODE_MODULES_CACHE=true remote:
commitしたソースファイルを圧縮し
ソースがビルドされます．
ビルドするときにnode.jsで書かれていることが感知されます(lockファイル等見られている？)
次に環境変数を指定します．
remote: -----> Installing binaries remote: engines.node (package.json): unspecified remote: engines.npm (package.json): unspecified (use default) remote: engines.yarn (package.json): unspecified (use default) remote: remote: Resolving node version 12.x... remote: Downloading and installing node 12.20.1... remote: Using default npm version: 6.14.10 remote: Resolving yarn version 1.22.x... remote: Downloading and installing yarn (1.22.10) remote: Installed yarn 1.22.10 remote: remote: -----> Restoring cache remote: - yarn cache
yarnを使っているのでここでyarnがインストールされます．
使っているライブラリをcacheから復元？
remote: -----> Installing dependencies remote: Installing node modules (yarn.lock) remote: yarn install v1.22.10 remote: warning package.json: "dependencies" has dependency "@types/react" with range "^16.9.53" that collides with a dependency in "devDependencies" of the same name with version "^16.9.49" remote: warning package.json: "dependencies" has dependency "typescript" with range "^4.0.3" that collides with a dependency in "devDependencies" of the same name with version "^4.0.2"
ここでyarn installが実行されます
(yarn.lcokファイルをみる)
remote: [1/4] Resolving packages... remote: [2/4] Fetching packages... remote: info fsevents@2.1.3: The platform "linux" is incompatible with this module. remote: info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. remote: info fsevents@1.2.13: The platform "linux" is incompatible with this module. remote: info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. remote: [3/4] Linking dependencies... remote: [4/4] Building fresh packages... remote: Done in 52.30s.
ここでResolving(依存解決)
remote: -----> Build remote: Running build (yarn) remote: yarn run v1.22.10 remote: $ react-scripts build remote: Creating an optimized production build... remote: Compiled successfully. remote: remote: File sizes after gzip: remote: remote: 211.99 KB build/static/js/2.46f7473a.chunk.js remote: 5.24 KB build/static/js/main.50327bed.chunk.js remote: 1.4 KB build/static/js/3.970c0882.chunk.js remote: 1.17 KB build/static/js/runtime-main.a169ad81.js remote: remote: The project was built assuming it is hosted at /. remote: You can control this with the homepage field in your package.json. remote: remote: The build folder is ready to be deployed. remote: You may serve it with a static server: remote: remote: yarn global add serve remote: serve -s build remote: remote: Find out more about deployment here: remote: remote: https://cra.link/deployment remote: remote: Done in 68.94s. remote:
ここでreact-script build が実行されます(react-create-appで作成したアプリなので)
buildしてできたgzipファイルが列挙されています．
gzipとはなに？って人のために
圧縮アーカイバと圧縮機能の違い アーカイバとは、、複数のファイルを一つにまとめるもの gzipはアーカイバではないので複数のファイルを一つにまとめるなどはない http://d.hatena.ne.jp/chaichanPaPa/20090115/1232026155
tarはアーカイバ
gzipは圧縮機能 http://qiita.com/taji-taji/items/ea020ecfea9f40513ea0
ということらしいです．
プロジェクトは/でホストされていると想定してビルドされました。
package.jsonのホームページフィールドでこれを制御できます。
らしいです.
静的サーバでも提供できるっぽい?
remote: -----> Pruning devDependencies remote: Skipping because NODE_ENV is not 'production' remote: remote: -----> Caching build remote: - yarn cache remote: remote: -----> Build succeeded! remote: ! Unmet dependencies don't fail yarn install but may cause runtime issues remote: https://github.com/npm/npm/issues/7494 remote: remote: -----> Discovering process types remote: Procfile declares types -> (none) remote: Default types for buildpack -> web remote: remote: -----> Compressing... remote: Done: 83.6M remote: -----> Launching... remote: Released v81 remote: https://〇〇/ deployed to Heroku remote: remote: Verifying deploy... done. To https://git.heroku.com/〇〇 e364951..6b0bdf1 feature-#216 -> master
Pruning devDependenciesをして
最後はHerokuにデプロイされて終了
prunignとは
pruneの現在分詞。おろす、 切り取る、 切り払う らしいです．
つまり remote: -----> Pruning devDependencies remote: Skipping because NODE_ENV is not 'production' は本番環境じゃないからdevDependenciesは取り除かれなかったよ
ってことですかね
独学でプログラミング特に
フロントエンドの力をつけたい人はこことか
フロントエンドコース
udemyとかを使った方が良いと思います．(成長スピードが違う)
フロントエンドエンジニアになりたい人の Webプログラミング入門
