create-react-appを使用してサイトを作成し、それを組み込み、 Express./client/buildで提供しています。
Expressを使用して、dev (localhost) でうまく機能する 2 つの基本的な API ルートもセットアップします。
netlifyにデプロイするにはどうすればよいですか?
react-scripts
次に、環境を手動で本番環境に設定して、サーバーをローカルにビルドします。最後webpack
に、コードを GitLab リポジトリにプッシュすると、デプロイが自動的にトリガーされます。
使用された Netlify デプロイの設定:
Build command: Not set
Publish directory: client/build
問題
API ルートの 1 つを使用しようとすると、エラー 404 が発生します...
計画
私のプロジェクト構造は次のようなものです:
| package.json
| server.js
| webpack.config.js
+---API
| dbHandler.js
| routesHandler.js
+---client
| | package.json
| +---src
| | | App.js
| | | ...
| +---node_modules
| +---public
| | index.html
| | manifest.json
| | _redirects
| \---build
| | index.html
| | manifest.json
| | _redirects
| | asset-manifest.json
| | favicon_rings.ico
| | service-worker.js
| \---static
| +---media
| | ...
| +---js
| | main.1e7ccdbf.js
| | main.1e7ccdbf.js.map
| \---css
| main.fc8f2d26.css
| main.fc8f2d26.css.map
+---public
| _redirects
\---bundles
bundle.js
コード
から抽出./package.json:
"main": "server.js",
"homepage": "https://custom.netlify.com",
"scripts": {
"start": "node server.js",
"build": "webpack --config webpack.config.js",
"postinstall": "npm run build",
"start:dev": "nodemon -e js --exec babel-node -- ./server.js"
}
./client/package.json:
"homepage": "https://custom.netlify.com",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && cp build/index.html build/404.html",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
./client/build/_redirectsと./public/_redirects:
# Redirects from what the browser requests to what we serve
/* /index.html 200
./server.js:
import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotMiddleware from "webpack-hot-middleware";
import routesHandler from "./API/routesHandler";
import config from "./webpack.config";
import bodyParser from "body-parser";
import webpack from "webpack";
import express from "express";
import path from "path";
const port = process.env.PORT || 5000;
const ExpressServer = express();
const CLI_BUILD_DIR = path.join(__dirname, "client/build");
const HTML_BUNDLE = path.join(CLI_BUILD_DIR, "index.html");
const compiler = webpack(config);
const isDevelopment = process.env.NODE_ENV === "development";
ExpressServer.use(bodyParser.urlencoded({ extended: true }));
ExpressServer.use(bodyParser.json());
ExpressServer.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
if (isDevelopment) {
ExpressServer.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
})
);
ExpressServer.use(webpackHotMiddleware(compiler));
} else {
// Serve static files from the React app
ExpressServer.use(express.static(CLI_BUILD_DIR));
}
// Define API routes
var router = express.Router();
router.post("/register", routesHandler.register);
router.post("/login", routesHandler.login);
// Put all API endpoints under '/API'
ExpressServer.use("/API", router);
// All other routes will be directed to the main page of user interface
ExpressServer.get("/", (req, res) => res.sendFile(HTML_BUNDLE));
ExpressServer.get("*", (req, res) => res.redirect(301, "/"));
// Start the server
ExpressServer.listen(port, function() {
console.log("Express server listening on http://localhost:" + port);
});
./webpack.config.js:
const path = require('path');
const webpack = require('webpack');
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = {
entry: [
'webpack-hot-middleware/client',
'./API/routesHandler.js',
'./API/dbHandler.js',
'./server.js'
],
externals: {
jquery: 'jQuery',
'react/addons': 'react',
'react/lib/ExecutionEnvironment': 'react',
'react/lib/ReactContext': 'react',
},
output: {
path: path.resolve(__dirname, 'bundles'),
filename: 'bundle.js',
publicPath: '/public',
sourceMapFilename: 'bundle.map',
},
devtool: process.env.NODE_ENV === 'production'
? undefined : 'cheap-module-eval-source-map',
resolve: {
modules: ['node_modules', './client/build', './API', '.'],
extensions: ['.js', '.jsx', '.css'],
},
module: {
rules: [
{
test: /(\.js$|\.jsx$)/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0', 'airbnb'],
},
},
],
},
{
test: /(\.css$|\.scss$)/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}
],
},
node: {
console: false,
fs: 'empty',
fsevents: 'empty'
},
plugins: [
new webpack.IgnorePlugin(/fs/)],
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
minimize: true,
compressor: {
warnings: false,
},
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
},
}),
],
};