ホームページ >ウェブフロントエンド >フロントエンドQ&A >nodejs本番環境デプロイメントvue

nodejs本番環境デプロイメントvue

WBOY
WBOYオリジナル
2023-05-14 10:26:37712ブラウズ

Node.js 本番環境のデプロイ Vue

Vue.js アプリケーションを開発する場合、アプリケーションのデプロイは重要な手順です。この記事では、Node.js をランタイム環境として使用して、実稼働環境に Vue.js アプリケーションをデプロイする方法を説明します。この記事では、アプリケーションを運用環境に追加し、サーバー上で実行する方法を詳しく説明します。

準備

始める前に、Node.js、npm、および Git をサーバーにインストールする必要があります。この記事では、サーバーとして UbuntuLinux を使用しますが、同様の手順を使用して他のシステムにデプロイすることもできます:

  1. Node.js と npm をインストールします:
$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install nodejs
$ sudo apt-get install npm
  1. Node.js と npm が正しくインストールされているかどうかを確認します:
$ node -v
$ npm -v
  1. Git をインストールします:
$ sudo apt-get install git
  1. Git が正しくインストールされているかどうかを確認します:
  2. ##
    $ git --version
Vue CLI のインストール

Vue CLI は、Vue.js ベースの公式コマンド ライン ツールで、Vue.js アプリケーションを迅速に構築するのに役立ちます。 Vue CLI をサーバー上にグローバルにインストールする必要があります:

$ npm install -g @vue/cli

次のコマンドを実行して、Vue CLI が正しくインストールされているかどうかを確認できます:

$ vue --version

Vue.js アプリケーションを作成する

次に、Vue.js アプリケーションを作成します。 Vue CLI を使用して新しいプロジェクトを簡単に作成したり、既存のプロジェクトを使用したりできます。

    ターミナルで、プロジェクトを作成するディレクトリを入力します:
  1. $ cd /path/to/directory
    Vue CLI を使用して新しい Vue.js プロジェクトを作成します:
  1. $ vue create my-project
ここで、my-project はプロジェクト名です。このコマンドを実行すると、Vue.js プロジェクトをカスタマイズするためのオプションがいくつか表示されます。新しい Vue.js アプリケーションが作成され、必要な依存関係がすべてインストールされます。

    作成したプロジェクトに移動します:
  1. $ cd my-project
    Vue.js アプリケーションを開始します:
  1. $ npm run serve
実稼働ビルドを作成します

次に、アプリケーションの実稼働ビルドを作成する必要があります。製品版のビルドによりアプリケーションが最適化され、効率が向上し、不要なコードが削減されます。次のコマンドを使用して、アプリケーションの実稼働ビルドを作成できます。

$ npm run build

このコマンドは、アプリケーションの dist ディレクトリに実稼働ビルドを作成します。この時点で、アプリケーションを実稼働環境にデプロイする準備が整いました。

Vue.js アプリケーションのデプロイ

実稼働ビルドを作成したので、次の手順を使用してアプリケーションを実稼働環境にデプロイします。

    空白を作成します。サーバー上のディレクトリにアプリケーションのファイルを保存します。
  1. $ mkdir /var/www/myapp
    アプリケーションのビルド ファイルをローカル マシンからサーバーにアップロードします。 scp コマンドを使用してアプリケーション ビルドをアップロードすることも、Git を使用することもできます:
  1. $ git clone <repository-url> /var/www/myapp
    http-server と pm2 をインストールします:
  1. $ npm install -g http-server
    $ npm install -g pm2
    myapp ディレクトリで http-server を開始します:
  1. $ http-server dist
    myapp ディレクトリで pm2 プロセスを開始します:
  1. $ pm2 start http-server --name myapp -- --cors -p 80
このコマンドは、pm2 プロセスを開始します。そしてアプリケーションをhttp-serverプロセスとして起動します。また、アプリケーションのポートを 80 に設定して、ホストの IP アドレスにアクセスしてアプリケーションを表示できるようにします。

結論

これで、Vue.js アプリケーションを運用環境に正常にデプロイできました。この記事の手順に従った場合は、サーバー上でアプリケーションを表示できるようになっているはずです。ご質問がある場合や問題が発生した場合は、お気軽にメッセージを残すか、Vue.js または Node.js の公式ドキュメントを参照して解決策を見つけてください。

以上がnodejs本番環境デプロイメントvueの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。