LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@basictomonokai(BASIC!友の会 元管理人)

【JS初心者向け】GitHubのViteプロジェクトをCodeanywhereでビルドしてロリポップ！のサブディレクトリで動かす方法

Posted at

※この記事は、私みたいにフロントエンドのGitHubリポジトリを自分の共有レンタルサーバーで動かすことに慣れていない人向けの記事です。

「GitHubで見つけた素敵なWebサイトのコードを、自分のレンタルサーバーで公開してみたい！」

そう思ったものの、「ビルド？」「webpack？Vite？」「SSH？」「サブディレクトリで動かすには？」など、よく分からない言葉がたくさん出てきて困っていませんか？

この記事では、GitHubにある「Vite」というツールを使ったWebサイトのプロジェクトを例に、ローカル環境（自分のPC）に開発環境を構築することなく、クラウド開発環境の「Codeanywhere」を使ってビルドし、ロリポップ！のようなSSHが使えない共用サーバーのサブディレクトリで公開するまでの具体的な手順を、初心者の方にも分かりやすく解説します。

この手順は、GitHubにあるViteプロジェクトを、ロリポップ！のようなサーバーの「サブディレクトリ」（例：https://あなたのドメイン/my_app/ のような、ドメイン名のすぐ後ろではない場所）に公開したい場合に特に役立ちます。Viteのデフォルト設定では、ビルド後にできるファイルがアセット（画像やCSS、JSなど、HTML以外の読み込みファイル）を読み込むパスが、サーバーの一番上（ルート /）を基準とした「絶対パス」**になってしまうことが多いためです。絶対パスのままだと、サブディレクトリに置いた際にアセットが正しく読み込めず、サイトの表示が崩れてしまう問題を解決できます。

対象となる方

  • JavaScriptを学び始めた方
  • GitHubにあるWebプロジェクトを動かしてみたい方
  • レンタルサーバー（ロリポップ！など）を持っていて、そこに公開したい方
  • ローカルPCの開発環境構築にまだ慣れていない方

必要なもの

  • GitHubアカウント
  • Codeanywhereアカウント (無料枠でOK)
  • ロリポップ！など、FTPファイルマネージャー機能がある共用レンタルサーバーのアカウント
  • （サーバー上でZIPを解凍するための「独自の方法」。記事内で補足します）
  • 公開したいGitHubのViteプロジェクトのリポジトリURL

さあ、Codeanywhereの力といくつかの設定変更で、Webサイトを公開してみましょう！

手順1：CodeanywhereでGitHubプロジェクトを準備する

まず、Codeanywhereというブラウザ上で使える開発環境で、元となるプロジェクトのコードを手に入れます。

  1. Codeanywhereのワークスペースを作成する:
    Codeanywhereにログインし、新しいワークスペースを作成します。ワークスペース作成時にはテンプレートを選択する画面になりますが、JavaScriptのプロジェクトを扱うので、例えば「Javascript-node.js」テンプレートを選んでおけば間違いないでしょう。（他のテンプレートでも基本的には大丈夫です）

  2. ターミナルを開く:
    Codeanywhereの画面内にターミナルが表示されているか確認してください。もし見当たらない場合は、画面左上にあるハンバーガーメニュー（三本線のアイコン）をクリックし、「Terminal（ターミナル）」を選んで表示させましょう。

  3. プロジェクトをクローンする:
    ターミナルが表示されたら、GitHubのリポジトリURLを使ってプロジェクトのコードをCodeanywhereの環境にコピー（クローン）します。

    git clone [GitHubリポジトリのURL]
# 例：git clone https://github.com/xdadda/mini-photo-editor.git

    コマンドを実行すると、Codeanywhereのファイル一覧（画面左側などに表示されていることが多いです）にプロジェクト名のフォルダが表示されるはずです。

手順2：プロジェクトに必要な「部品」をインストールする

Webプロジェクトの多くは、開発やビルドに必要な様々な「部品」（ライブラリやツール）に依存しています。これらをインストールします。

  1. プロジェクトフォルダへ移動:
    ターミナルで、先ほどクローンしてできたプロジェクト名のフォルダに移動します。

    cd [プロジェクトフォルダ名]
# 例：cd mini-photo-editor

  2. 部品（依存関係）をインストール:
    以下のどちらかのコマンドを実行します。プロジェクトによって npm install または yarn install のどちらを使うかが決まっています（通常、プロジェクトのREADMEに記載があります）。

    npm install
# または
yarn install

    コマンドを実行すると、ターミナルにたくさんのメッセージが表示され、プロジェクトフォルダの中に node_modules というフォルダが作成されます。これがインストールされた部品です。

手順3：サブディレクトリでも正しく動くように設定を変更する（ここが重要！）

Viteプロジェクトをそのままビルドすると、CSSやJavaScriptファイルへのパスが /assets/ファイル名 のように「絶対パス」になることが多いです。これは、Webサイトをサーバーのルートディレクトリ（https://あなたのドメイン/）に置く場合は問題ありませんが、サブディレクトリ（例：https://あなたのドメイン/フォルダ名/）に置くと、ファイルを正しく読み込めなくなってしまいます。

ロリポップ！のような共用サーバーでサブディレクトリに公開するために、このパスを「相対パス」（HTMLファイルがある場所を基準にしたパス）に変更する設定を行います。

  1. vite.config.js を開く:
    Codeanywhereのファイル一覧から、プロジェクトフォルダのすぐ下にある vite.config.js というファイルを探して開きます。

  2. base: './' を追記する:
    開いた vite.config.js の中で、defineConfig(...) => { return { ... } } の {} の一番上の階層に、base: './', という1行を追記します。

    import { defineConfig, loadEnv } from 'vite';
import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals";

export default defineConfig(({isSsrBuild, mode})=>{

  return {
    // ★★★ ここに base: './' を追記します ★★★
    base: './',

    plugins: [
      // ... 元からあるプラグイン設定 ...
      {...minifyTemplateLiterals(),apply:'build'}
    ],
    resolve: {
      // ... 元からあるresolve設定 ...
      alias: [
        // ... エイリアス設定 ...
      ],
    },
    build: {
      // ... 元からあるbuild設定 ...
      target: 'esnext',
      minify: true, //in production to reduce size
      sourcemap: false, //unless required during development to debug production code artifacts
      modulePreload: { polyfill: false }, //not needed for modern browsers
      cssCodeSplit:false, //if small enough it's better to have it in one file to avoid flickering during suspend
      copyPublicDir: isSsrBuild?false:true,
      rollupOptions: {
        output: {
          manualChunks: { mini: ['mini'] }
        }
      }
    },
    // ... 他の設定があればここに続く ...
  }
})

    base: './' と設定することで、ビルド後のアセットへのパスが ./assets/ファイル名 のように、HTMLファイルがある場所を基準にした相対パスとして出力されるようになります。

  3. ファイルを保存する:
    ファイルを保存します。Codeanywhereでは通常自動保存されますが、念のため保存されているか確認してください。

手順4：公開用のファイル「dist」フォルダを作る（ビルド）

設定変更が終わったら、Webサイトを公開するために必要な最終的なファイル群を作り出します。この作業を「ビルド」と呼び、生成されるファイル群は通常 dist （ディストリビューション）フォルダにまとめられます。

  1. ビルドコマンドを実行:
    Codeanywhereのターミナルがプロジェクトのルートディレクトリにいることを確認し、以下のコマンドを実行します。

    npm run build

    コマンドが完了すると、プロジェクトフォルダの中に新しく dist というフォルダができているはずです。このフォルダの中に、公開に必要なファイル（index.html、assets フォルダなど）がすべて入っています。手順3の設定のおかげで、これらのファイル内のパスは相対パスになっています。

手順5：「dist」フォルダを一つにまとめて圧縮する（ZIP化）

dist フォルダとその中身を、サーバーへのアップロードや管理がしやすいように、一つのZIPファイルにまとめます。

  1. dist フォルダへ移動:
    ターミナルで、作成された dist フォルダに移動します (cd dist)。

  2. ZIP圧縮を実行:
    以下のコマンドを実行して、カレントディレクトリ（今いる dist フォルダ）の中身すべてを、一つ上の親ディレクトリに dist.zip という名前で圧縮して保存します。

    zip -r ../dist.zip *

    コマンドが完了すると、ターミナルで一つ上のディレクトリに戻り（cd ..）、ファイル一覧を確認すると、dist.zip というファイルができているはずです。

手順6：Codeanywhereから自分のPCにダウンロードする

ビルドしたファイルをロリポップ！に渡すために、一度Codeanywhereから自分のPCにダウンロードします。ロリポップ！のようなSSHが使えない共用サーバー相手に、確実にファイルを渡すための手順です。

  1. dist.zip をダウンロード:
    Codeanywhereのファイル一覧で、手順5で作成した dist.zip ファイルを探します。
    ファイルを右クリック（またはメニューから操作）して、「Download」（ダウンロード）を選択します。
    これで、dist.zip ファイルがあなたのPCにダウンロードされます。

手順7：ロリポップ！にZIPファイルをアップロードする

ダウンロードしたZIPファイルを、ロリポップ！サーバーのファイルマネージャー機能を使ってアップロードします。

  1. ロリポップ！のファイルマネージャーを開く:
    ロリポップ！のユーザー専用ページにログインし、「ファイルマネージャー」を開きます。
  2. アップロード先フォルダへ移動:
    Webサイトを公開したいディレクトリに移動します。（例: web/ ディレクトリの下に新しく my_app というフォルダを作ってそこに置きたい場合は、web フォルダ内で新しいフォルダを作成し、その my_app フォルダに入ります）
  3. ZIPファイルをアップロード:
    ロリポップ！のファイルマネージャーの画面にある「アップロード」機能などを使って、手順6でPCにダウンロードした dist.zip ファイルを、開いているフォルダにアップロードします。

手順8：サーバー上でZIPを解凍する（独自の方法）

ロリポップ！のエコノミープランなど、SSH接続が提供されていないプランでは、サーバーにアップロードしたZIPファイルをターミナルコマンド（unzip）で解凍することができません。また、ロリポップ！のFTPファイルマネージャーには標準でZIP解凍機能がありません。そのため、別途ZIPを解凍するための方法を用意する必要があります。

(この「独自の方法」はロリポップ！の環境やご自身のスキルによって異なりますが、例えば以下のような方法が考えられます)

  • ZIP解凍機能を持つPHPスクリプトを使う: PHPで書かれた、アップロードされたZIPファイルを解凍する機能を持つ短いスクリプトを一時的にサーバーに置き、ブラウザからそのスクリプトにアクセスして解凍を実行する方法です。

PHPスクリプトの例
注意：サーバーによってはファイルマネージャーに解凍機能がある場合もありますが、あくまで例として記載しています

  1. unzip.php を作成
    以下のコードをコピーし、unzip.php という名前で保存します（文字コードはUTF-8）。
<?php
// unzip.php
if(isset($_GET['execute'])) {
    $zip = new ZipArchive();
    if ($zip->open('dist.zip') === TRUE) {
        $zip->extractTo('./');
        $zip->close();
        echo '解凍完了！このファイルは削除してください';
        unlink(__FILE__); // スクリプト自動削除
    } else {
        exit('ZIPファイルが開けません');
    }
} else {
    echo '<a href="?execute=1">解凍実行（必ずZIPファイルと同階層に配置）> </a>';
}

  1. ZIPファイルと同じディレクトリに配置
    Codeanywhereで作成した dist.zip と unzip.php を、ロリポップ！の同一フォルダ内にアップロードします。

  2. ブラウザでスクリプト実行
    https://あなたのドメイン/アップロード先フォルダ/unzip.php にアクセスし、「解凍実行」リンクをクリックします。

  3. 結果確認と後処理

  • 成功時：画面に「解凍完了！」と表示され、index.html と assets フォルダが生成されます >
  • 必ずスクリプトが削除されることを確認（自動削除されますが、手動で存在確認を推奨）
  • セキュリティリスク軽減のため、解凍後はZIPファイルも削除してください

重要：解凍方法はサーバーごとに異なります。必ずご利用サーバーのマニュアルで解凍機能の有無を確認してください。PHPスクリプト利用時は常にセキュリティリスクを意識し、スクリプトの即時削除を徹底してください。

ご自身が利用可能な「独自の方法」を用いて、手順7でアップロードした dist.zip ファイルを、同じディレクトリ内で解凍してください。解凍が成功すると、dist.zip と同じ場所に index.html や assets フォルダなどが展開されます。

手順9：公開したサイトを確認する

全てのファイルが正しく配置できたら、ブラウザでアクセスして確認してみましょう。

  1. サイトのURLにアクセス:
    ブラウザのアドレスバーに、ロリポップ！のドメイン名と、手順7でファイルをアップロードしたディレクトリ名を組み合わせたURLを入力してアクセスします。
    https://[あなたのロリポップ！ドメイン名]/[アップロード先のフォルダ名]/
    （例: https://your-domain.lolipop.jp/my_app/）

手順3で base: './' の設定を行ったおかげで、サブディレクトリに配置しても index.html からCSSやJavaScriptファイルなどが正しく読み込まれ、Webサイトが表示され、動作するはずです。

手順は以上です。

Codeanywhereを使うことでローカル環境構築の手間を省き、Viteの設定変更とサーバーでの少しの工夫で、GitHubにあったWebサイトをロリポップ！のサブディレクトリで公開することができました。特に、SSHが使えない環境でサブディレクトリにデプロイする際のパスの問題とファイル転送・解凍の工夫は、共用サーバーを利用する上で役立つ知識です。

この手順が、参考になれば幸いです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?