初学者向けの内容にしたつもりです。
自分自身も初学者なのでいろいろ無駄な点があると思いますがあしからず。
環境構築とかの詳しい説明は書籍の方でお確かめください。(ダイマ)
Amazonリンク
作りながら学ぶReact入門
結果
ここ
https://react-node-first-connect.herokuapp.com/
環境構築
金欠マンのためWindows10でやりました。Mac欲しい。
※Nodeをお持ちでない方はまず ここ からダウンロード。推奨版でOK。
まずプロジェクト作成。
mkdir プロジェクト名
cd プロジェクト名
mkdir public src
npm init -y
出来たpakage.jsonにサーバー起動とWebpackビルドのスクリプトを追加しておきます。
--省略--
"main":"index.js",
"scripts":{
"start": "node server.js",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords":[],
--省略--
とりあえずReact環境構築に必要なものをインストールしていきます。
・React本体
・Webpack (モジュールバンドラー。jsとかcssとか画像とかを一つのjsファイルにまとめてくれる奴？)
・Babel(webpackで使うトランスパイラ。Reactの構文を変換してくれる奴？)
あとついでにBootstrapもとっとこハムタロサァン...。
書籍の方にはwebpack-dev-serverやESLintなどもありますが、今回の目標は本番環境へのデプロイなので省略。
npm install react react-dom
npm install webpack webpack-cli css-loader style-loader --save-dev
npm install @babel/core @babel/preset-env @babel/preset-react @babel/cli babel-loader--save-dev
npm install bootstrap
各種設定ファイルを作っていきます。
Windowsの作成コマンドはこちら。
copy nul ファイル名
(コピペ用。拡張子のみのは最後にピリオドいる)
wepback.config.js
.babelrc.
module.exports = {
entry: {
app: "./src/pre-page-main.js" //ファイル名は何でも構いません
},
output: {
path: __dirname + '/public/js',
filename: "[name].js"
},
devtool: "eval-source-map",
mode: 'production',
module: {
rules: [
{
test: /\.css$/,
loader: ["style-loader", "css-loader"]
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}
]
}
}
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
実行ファイル作成
index.html(htmlファイル)
pre-page.main.js(Reactのjsファイル)
server.js(nodeのjsファイル)
↓こういう感じでフォルダを配置。
/ - public - index.html
|
- src - pre-page-main.js
|
- server.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
<title>React-Express</title>
</head>
<body>
<div id="root"></div>
<p>あ</p>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
const FirstNav = () => {
return (
<nav className="navbar navbar-expand-sm navbar-dark bg-primary">
<a href="./"><h4 className="navbar-brand col-1 py-2">Title</h4></a>
<a href="#" className="nav-item nav-link text-light offset-1">Home</a>
<a href="#" className="nav-item nav-link text-light">My-Tasks</a>
</nav>
)
}
ReactDOM.render(
<FirstNav />,
document.getElementById('root')
)
const express = require('express');
const app = express();
app.use(express.static('src'))
app.use(express.static('public'))
app.use(express.static('public/js'))
app
.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
})
//ローカル環境での実行
/*
app.listen(3030, () => {
console.log('just moving...');
});
*/
//デプロイ時の実行
/*
app.listen(process.env.PORT);
*/
必要に応じてコメントアウト消してください。
Webpackビルド
webpack.config.jsを参考に実際に読み込まれるファイルを作成します。
(成功すればpublicフォルダ内にjsフォルダ、その中にapp.jsが作成されているはずです。)
npm run build
これで一応ローカル上ではReactの動作確認ができる状態です。
確認したい方は
①server.js内の上側のapp.listen()をコメントアウトしてるので消す。
②サーバー起動。
npm start
③ターミナル(コマンドプロンプト)を閉じずにhttp://localhost/3030 にアクセス。
こんなのが出るはず。
④動作確認できたらCtrl+Cでサーバー停止。
⑤念のため上側のapp.listen()をもう一回コメントアウトしておく。
Herokuの操作いろいろ
①Herokuの会員登録をする。Herokuトップページ
②コマンドラインからHerokuを動かせるHeroku-cliをダウンロードする。Heroku-cli
③コマンドラインからHerokuへログインする。(オプションに-iをつけることでブラウザを介さずにログインできます。)
heroku login -i
④Herokuのアプリを作成
heroku create アプリ名
いよいよHerokuへデプロイ
①本番環境用にserver.js内の下側のapp.listen()を再表示。(コメントアウト消す)
②Gitリポジトリを作成。
※Gitをお持ちでない方は こちら
git init
③プロジェクトをGitの管理下におく。
git add .
git commit -m "first commit."
④リモートリポジトリにHerokuのプロジェクトを紐づけする？(ここら辺曖昧)
heroku git:remote -a アプリ名
⑤リモートリポジトリへpush。
git push heroku master
これでエラーがでなければデプロイは完了です。
結果を見たい場合、コマンドラインで
heroku open
と打つか、ブラウザでHerokuの操作をすることで見れます。
①右上のダッシュボードを選択
②自分の作ったプロジェクトを選択
③右上のOpen appを選択