目的
StackBitz（オンラインコードエディタ）で開発したWebアプリケーションをビルドし、レンタルサーバーにアップロードして公開することを目的とします。
前提条件
- MacOSを使用
- Node.jsとnpmがインストール済みであること
手順
1.StackBitzからWebアプリの構成ファイルをダウンロード
StackBitzでプロジェクトを開きます。
以下のスクショ赤枠のボタンから、構成ファイルをZIP形式でダウンロードできます。
2.Macのホームディレクトリに配置
ダウンロードしたZIPファイルを解凍して、以下のホームディレクトリに配置します。
/Users/[ユーザー名]/[ここに解凍したフォルダ名]
例では「vitejs-vite-q1t2xyaj」というフォルダ名です。
補足：ホームディレクトリ内には、「/Users/[ユーザー名]/書類」や「/Users/[ユーザー名]/ダウンロード」などのフォルダがあります。
3.package.jsonを編集
構成ファイル「package.json」に公開URLを指定するため、最初に homepage の項目を追加します。
例: サーバーのサブディレクトリ「react」に公開する場合
{
"homepage": "https://[ドメイン名]/react/",
"name": "vite-react-starter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
// 他の設定は省略
},
"dependencies": {
// 他の設定は省略
},
"devDependencies": {
// 他の設定は省略
}
}
4.vite.config.jsを編集
サブディレクトリに配置する場合のみ編集が必要です。
構成ファイル「vite.config.js」の base オプションにベースパスを設定します。
例: サブディレクトリ「react」に配置する場合
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/react/', // サブディレクトリに配置する場合のベースパス
})
5.publicフォルダに「.htaccess」を作成
構成ファイルの「public」フォルダに以下の内容で「.htaccess」ファイルを作成します。
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
6.ターミナルでビルド
ターミナルを開き、ホームディレクトリに配置したプロジェクトのフォルダに移動します。
例：「vitejs-vite-q1t2xyaj」というフォルダ名の場合
cd vitejs-vite-q1t2xyaj
次に、ビルドを実行します。
npm run build
7.ビルドされたファイルをFTPでアップロード
ビルド後、「dist」というフォルダが作成されます。
この「dist」フォルダ内のファイルをすべて、サーバーの公開ディレクトリへFTPでアップロードします。
※「dist」フォルダ自体をアップロードする必要はありません。
これで、公開URLにアクセスすると、Webアプリーケーションが公開できているかと思います。
最後に
Reactを学ぶためのツールは便利なものが多く、面倒な環境構築をせずともサクサク学べます。
しかし、いざ自分で環境構築・公開するとなれば、どうすれば良いかわかりません。
そのため、オンラインコードエディタで作成したプロジェクトを公開する具体的な手順を記事にしました。