ReactアプリをFTPサーバーにアップロードする

クラウドが主流になってはきていますが、作ったアプリを低コストのFTPで運用したい人に向けて記事を書きます。
ReactといえどただのJSなのでビルドしたらFTPサーバーにあげることも可能です。

React App

package.jsonにアップロード先のURLを追加してビルド。

pacjage.json

"homepage": "https://ryotarch.com/relativepath", // アップロード先のURL
$ yarn build

吐き出されたbuildファイルをFTPサーバーに上げれて反映されていれば成功。
もしもページが真っ白になっていたら、pacjage.jsonのアップロード先のURLを間違えたりする可能性があるのでパスが合っているか確認してください。

Next.js App

Next.jsの場合は、SSRのこだわりがなければSSGで吐き出すようにすればよいです。
こちらも同様にpackage.jsonにhomepage情報を追記、ビルドして吐き出されたoutフォルダの中身をFTPサーバーにアップすれば動きます。

pacjage.json

"scripts": {
  "build": "next build && next export"
},
"homepage": "https://ryotarch.com/relativepath",

なお、Nextの場合はSSGにする際、next.config.jsを編集する必要があります。存在しなければ作ってください。

module.exports = {
  exportTrailingSlash: true, // urlの最後にスラッシュを入れるかいれないか
  exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return { // パスはこのような形で書いていく
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
    }
  },
}

参照元

$ yarn build
$ yarn next -export

関連記事