vueプロジェクトにサーバーをデプロイする方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-05-08 09:50:06

オリジナル

12628 人が閲覧しました

Web フロントエンド開発における Vue フレームワークの人気により、Vue を使用して独自の Web アプリケーションを構築する開発者が増えています。ほとんどの開発者にとって、Vue プロジェクトのローカル開発は問題ではありませんが、プロジェクトをサーバーにデプロイする方法はより厄介な問題です。この記事では、Vue プロジェクトをサーバーにデプロイするための経験とテクニックをいくつか紹介します。

1. サーバー環境の準備

Vue プロジェクトをデプロイする前に、サーバーを準備し、Node.js と NPM 環境をインストールする必要があります。 Node.js は、JavaScript コードを実行できる Chrome V8 エンジンに基づく JavaScript 実行環境です。NPM は、JavaScript パッケージのインストール、管理、公開に使用される Node.js のパッケージ管理ツールです。 Node.js と NPM をインストールしていない場合は、最初にこれら 2 つのソフトウェアをインストールしてください。

さらに、2 つのツール Git と PM2 もサーバーにインストールする必要があります。Git はコードベースからコードをプルするために使用されるバージョン管理システムであり、PM2 は起動できるデーモンマネージャーです。、Node.js アプリケーションを停止、再起動、監視します。

2. Nginx サーバーの構成

Vue プロジェクトをサーバーにデプロイする前に、HTTP リクエストを処理できるように Nginx サーバーを構成する必要があります。 Nginx は、リクエストをさまざまなポートにルーティングできる高性能 HTTP およびリバースプロキシサーバーであり、SSL 証明書が HTTPS サポートを提供できるようにすることもできます。

Nginx を構成する前に、Vue プロジェクトを静的ファイルにパッケージ化する必要があります。これは、Vue CLI で build コマンドを使用することで実現できます:

$ npm run build

ログイン後にコピー

このコマンドを実行すると、プロジェクトがルートディレクトリに dist ディレクトリが生成され、パッケージ化された静的ファイルが含まれます。

次に、次のコマンドを使用してサーバーに Nginx をインストールします:

$ sudo apt-get update
$ sudo apt-get install nginx

ログイン後にコピー

インストール後、/etc/nginx/sites-available/default ファイルを編集して Nginx サーバーを構成できます。

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.html;

    server_name example.com;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

ログイン後にコピー

この例では、ポート 80 でリッスンする Nginx サーバーが構成されています。root ディレクティブは Nginx のルートディレクトリの設定に使用され、server_name はサーバー名の設定に使用され、location ディレクティブが使用されますリクエストルートを設定します。

Vue プロジェクトはシングルページアプリケーション (SPA) であるため、すべてのページは JavaScript と CSS によって動的に生成されるため、動的を処理するには Nginx サーバーに場所ディレクティブを追加する必要があることに注意してください。ルーティング:

location /api/ {
    proxy_pass http://localhost:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

ログイン後にコピー

この例では、/api/ パスが要求されると、ローカルマシンのポート 3000 にプロキシされ、HTTP ヘッダー情報が設定されます。

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

Nginx サーバーを構成したら、Vue プロジェクトをサーバーにデプロイできます。以下に、具体的な手順をいくつか示します。

Git を使用して、サーバー上で Vue プロジェクトコードをプルします。

$ git clone https://github.com/username/vue-project.git

ログイン後にコピー

プロジェクトディレクトリを入力し、依存関係をインストールします。

$ cd vue-project
$ npm install

ログイン後にコピー

プロジェクトルートディレクトリに PM2 構成ファイルを作成します:

{
  "name": "vue-project",
  "script": "npm",
  "args": "start",
  "env": {
    "NODE_ENV": "production"
  }
}

ログイン後にコピー

この例では、npm start を使用して、vue-project という名前のプロセスが構成されます。このコマンドはアプリケーションを起動し、運用環境変数を設定します。

PM2 を使用して Vue プロジェクトを開始します:

$ pm2 start pm2.config.js

ログイン後にコピー

この方法では、サーバー上で Vue プロジェクトを開始し、Nginx サーバー上の URL にアクセスしてアプリケーションにアクセスできます。。

4. 結論

この記事では、Vue プロジェクトをサーバーにデプロイする方法を紹介します。簡単な構成を通じて、Vue プロジェクトを運用環境にデプロイでき、Nginx と PM2 を使用して強力な HTTP サービスとプロセス管理機能を提供します。この記事が、Vue プロジェクトをサーバーにデプロイしたい開発者にとって役立つことを願っています。

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