Vue.js プロジェクトをサーバーにデプロイする方法

フロントエンドテクノロジーの発展に伴い、フロントエンドの責任範囲はさらに広がりました。 Vue.js は JavaScript フレームワークとして、フロントエンド開発で広く使用されています。アプリケーションが拡張し続けると、Web ブラウザーでアクセスできるように、Vue.js アプリケーションをサーバーにデプロイする必要があります。この記事では、Vue.js アプリケーションをサーバーにデプロイする方法を紹介します。

1. Vue.js プロジェクトのパッケージ化

Vue.js アプリケーションをデプロイする前に、まず Vue.js アプリケーションをパッケージ化する必要があります。 Vue.js アプリケーションのパッケージ化は、アプリケーションのすべての静的ファイルを収集し、それらを 1 つ以上のファイルにマージするプロセスです。パッケージ化の目的は、アプリケーションの読み込み速度を向上させ、開発と展開を簡素化することです。

Vue.js アプリケーションの場合、パッケージ化に Vue CLI を使用できます。 Vue CLI は、Vue.js プロジェクトを迅速に作成および管理できる Vue.js コマンド ライン ツールです。まず、Vue CLI がローカル コンピューターにインストールされていることを確認します。コマンド ターミナルに次のコマンドを入力します。

npm install -g @vue/cli

Vue CLI のインストールが完了したら、次のコマンドを使用して Vue.js プロジェクトを作成できます。

vue create my-vue-app

次に、ディレクトリを入力します。

npm run build

このコマンドは、Vue.js アプリケーションを「dist」という名前のフォルダーにパッケージ化します。パッケージ化されたフォルダーには、アプリケーションのすべての静的ファイルと、ブラウザーで直接開くことができる「index.html」ファイルが含まれています。

2. サーバーの選択

Vue.js アプリケーションをサーバーにデプロイする前に、適切なサーバーを選択する必要があります。 Vue.js アプリケーションのホストに使用できるサーバーには、Apache、Nginx、Express など、さまざまな種類があります。ここでは、サーバーとして Nginx を選択します。

Nginx は強力なパフォーマンスを備えた軽量 Web サーバーであり、多くの大規模 Web サイトで使用されているサーバーです。 Nginx は拡張性とカスタマイズ性が高く、Ubuntu や CentOS などのオペレーティング システム上で実行できます。

3. サーバー構成

Nginx をインストールする前に、サーバー上のソフトウェア パッケージを更新する必要があります。コマンド ターミナルに次のコマンドを入力します。

sudo apt update
sudo apt upgrade

ソフトウェア パッケージを更新した後、次のコマンドを使用して Nginx をインストールできます。

sudo apt-get install nginx

インストールが完了すると、Nginx が自動的に起動します。次のコマンドを使用して、Nginx の実行ステータスを確認できます。

sudo systemctl status nginx

すべてが正常であれば、Nginx が実行されていることがわかります。

次に、Vue.js アプリケーションを使用するように Nginx 構成ファイルを変更する必要があります。まず、Nginx のデフォルト設定ファイルをバックアップする必要があります。コマンド ターミナルに次のコマンドを入力します。

sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak

バックアップが完了したら、新しい構成ファイルを作成できます。コマンド ターミナルに次のコマンドを入力します。

sudo nano /etc/nginx/sites-available/default

次の内容をファイルに追加します。

server {
  listen 80;
  server_name your-server-ip;

  location / {
      root /var/www/html/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

「your-server-ip」をサーバーの IP アドレスに置き換えてください。 「/var /www/html/dist」は、Vue.js アプリケーションのパッケージ化フォルダー パスに置き換えます。

ファイルを保存して終了し、Nginx を再起動して変更を有効にします。コマンド ターミナルに次のコマンドを入力します:

sudo systemctl restart nginx

4. Vue.js アプリケーションをデプロイする

これで、Vue.js アプリケーションをサーバーにデプロイする準備が整いました。 Vue.js アプリケーションのパッケージ化フォルダーは、SCP や FTP などのツールを使用してサーバーにアップロードできます。アップロードが完了したら、Nginx ユーザーがアクセスできるようにパッケージング フォルダーのアクセス許可が設定されていることを確認してください。

sudo chmod -R 755 /var/www/html/dist

Vue.js アプリケーションがサーバーに正常にデプロイされたら、サーバーのWeb ブラウザの IP Vue.js アプリケーションにアクセスするためのアドレス。

概要

Vue CLI を介して Vue.js アプリケーションをパッケージ化し、サーバーとして Nginx を使用してデプロイすると、Vue.js アプリケーションをインターネットに迅速かつ簡単にデプロイできます。 Nginx の設定ファイルはニーズに合わせて自由にカスタマイズできます。 Vue.js アプリケーションのデプロイには注意が必要ですが、それはすべての Vue.js 開発者が知っておくべきスキルでもあります。

以上がVue.js プロジェクトをサーバーにデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。