この記事は？
Railsサーバーと通信するReactアプリをデプロイする時の、自分が踏んだ手順を紹介します。
以前作成したRailsアプリのViewをReactで作り直し、最低限の機能実装まではできたのでデプロイしようとしたら手間取りました。
手順
以下、自分が踏んだ手順を紹介します。
git pull
Jenkinsとか使ってる人はいらないでしょう。
npm install -g npm
そのままnpm installしようとしたら、先にやるように警告された。
そのまま打ったら「permission denied」エラーを出したのでsudoをつけた
npm install
create react appで使用するパッケージを読み込む
終わったらnode_modulesディレクトリが増えていることを確認します。
npm run build
Reactをこれでビルドします。
が、ここで問題が発生
$ npm run build
> client@0.1.0 build /var/www/rails/foreign_books_search/client
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.js
Cannot find file './css/App.css' in './src'.
確認してみると、そもそも./src/css/ディレクトリが存在しない。
よく考えたら、自分はCSSではなくSCSSを使用しているので、Reactをビルドする前にまずSCSSをビルドしなければならない。
というわけで、自分が作成したgulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('default', function () {
return gulp.src('./src/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./src/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
なので、以下のコマンド
$ gulp
-bash: gulp: コマンドが見つかりません
...?
node_modulesにPATHが通ってない！
$ export PATH=$PATH:node_modules/.bin
$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2
$ gulp
[23:02:47] Using gulpfile /var/www/rails/my_app/client/gulpfile.js
[23:02:47] Starting 'default'...
[23:02:47] Finished 'default' after 53 ms
./src/css/があることを確認したので、改めてReactのビルドを行います。
$ npm run build
> client@0.1.0 build /var/www/rails/foreign_books_search/client
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.js
Cannot find module: '@material-ui/core'. Make sure this package is installed.
You can install this package by running: yarn add @material-ui/core.
今度はmaterial-uiが無いと。。。
指示に従いインストール
$ yarn add @material-ui/core
yarn add v1.15.2
※色々表示される
Done in 92.95s.
３度めの正直を祈って！
$ npm run build
> client@0.1.0 build /var/www/rails/foreign_books_search/client
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
92.81 KB build/static/js/2.f13f31dd.chunk.js
3.75 KB build/static/js/main.29ffb305.chunk.js
772 B build/static/js/runtime-main.b240f91f.js
681 B build/static/css/main.9ea7ac83.chunk.css
580 B build/static/css/2.94155858.chunk.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
https://bit.ly/CRA-deploy
Compiled successfully !
build/ディレクトリにindex.htmlがあることも確認しました。
Nginxの設定
設定ファイルのrootをbuild/ディレクトリにする
設定の読み込み
$ sudo systemctl reload nginx
その後、ドメインにアクセスし、アプリが表示されることを確認！
ついでに、今後新しい修正を反映するときはnpm run buildやunicornの再起動を忘れずに。