0Pricing
Vue Academy · レッスン

ホスティングプラットフォームへのデプロイ

Vueアプリを静的ホスティングサービスや各種プラットフォームにデプロイします。

「ホスティングプラットフォームへのデプロイ」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。

アプリの公開

VueのSPAは静的ファイルにビルドされるため、どの静的ホストでもホスティングできます。Netlify、Vercel、GitHub Pagesなどのプラットフォームを使えば、これらのファイルを迅速に、しかも多くの場合無料でデプロイできます。

デプロイするもの

npm run buildで生成されたdistフォルダーの内容をデプロイします。ホストはCDNを通じて、世界中のユーザーにこれらのファイルを配信します。

npm run build
# upload the dist/ folder to your host

Netlifyへのデプロイ

Netlifyでは、Gitリポジトリからビルドできます。ビルドコマンドと公開するフォルダーを指定します。

# Netlify settings
# Build command: npm run build
# Publish directory: dist

Vercelへのデプロイ

VercelはViteプロジェクトを自動的に検出します。リポジトリを接続すると、ビルドを実行して出力を配信し、プッシュするたびに再デプロイします。

# Vercel auto-detects:
# Build command: npm run build
# Output directory: dist

GitHub Pagesへのデプロイ

GitHub Pagesは、リポジトリから静的ファイルを配信します。ローカルまたはCIでビルドし、distの出力をPagesブランチにプッシュするか、アクションを使用します。

ヒストリーモードの問題

ヒストリーモードのVue Routerでは、/aboutのような見やすいURLを使用できます。しかし静的ホストには実際の/aboutファイルがないため、URLに直接アクセスしたりページを更新したりすると404が返されます。

SPAのリダイレクトによる解決

解決策は、すべてのルートでindex.htmlを返すようサーバーに指示し、クライアント側のルーティングをVue Routerに任せることです。

Netlifyのリダイレクトルール

Netlifyでは、_redirectsファイル（またはnetlify.tomlのルール）を追加し、すべてのパスをindex.htmlに書き換えます。

# public/_redirects
/*    /index.html   200

Vercelのリライトルール

Vercelでは、vercel.jsonのリライトによって、同じようにindex.htmlへフォールバックできます。

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

ベースパスの設定

アプリをサブパス（GitHub Pagesでよく使われる/my-repo/など）から配信する場合は、Viteの設定でbaseオプションを指定し、アセットのURLが正しく解決されるようにします。

// vite.config.js
export default {
  base: "/my-repo/"
}

CIによるデプロイ

継続的インテグレーションでデプロイを自動化します。ワークフローが依存関係をインストールし、テストを実行し、ビルドして、mainブランチへのプッシュごとに公開するため、公開作業を手動で行う必要がなくなります。

# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/

確認問題

デプロイに関する知識を確認します。

まとめ

distフォルダーを、Netlify、Vercel、GitHub Pagesなどの静的ホストにデプロイします。SPAのフォールバック（index.htmlへのリダイレクトまたはリライト）を追加して、更新時にもヒストリーモードのルートが機能するようにします。サブパスでホスティングする場合はViteのbaseを設定し、CIですべてを自動化します。次は、本番環境でアプリを監視し、保守します。

よくある質問

「ホスティングプラットフォームへのデプロイ」レッスンは無料ですか？

はい。「ホスティングプラットフォームへのデプロイ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。

「ホスティングプラットフォームへのデプロイ」で何を学びますか？

Vueアプリを静的ホスティングサービスや各種プラットフォームにデプロイします。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「ホスティングプラットフォームへのデプロイ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ビルドプロセスの最適化
  2. ホスティングプラットフォームへのデプロイ
  3. モニタリングとメンテナンス
← Vue Academyに戻る