nginx で Vue プロジェクトをデプロイする方法

今日は nginx サーバーを使用するのですが、vue プロジェクトをサーバーにデプロイする必要もあるので、それを書き留めておきます。

まず、nginx の公式 Web サイトにアクセスして nginx をダウンロードします。

ダウンロードアドレス: https://nginx.org/en/download.html

ダウンロードしたファイルは解凍されたパッケージなので、保存したいフォルダに解凍してください。

nginx.exe を実行し、ブラウザを開いて localhost と入力します。次の画像が表示されれば成功です。

うまくいかない場合は慌てないでください。ポートが他のコンテンツで占有されている可能性があります。その場合は、nginxディレクトリを開いてconfを見つけてください。

クリックしてnginx.confファイルを見つけます

次に、エディターで開いて、サーバーの listen (ポート番号) を見つけます。デフォルトはポート 80 です。自分の空いているポートに合わせて書き換えることができます。書き換えた後、保存してローカルホストを開きます。書き換えたポート番号は OK です。

 サーバー{
      聞く 8088;
      server_name ローカルホスト;

      #文字セット koi8-r;

      #access_log ログ/host.access.log メイン;

      位置 / {
        ルートhtml;
        インデックス index.html index.htm;
    } 

上記は、nginx サーバーをインストールして構成する方法です。以下は、インストールして構成した nginx サーバーに独自の vue プロジェクトをデプロイする手順です。

まず、自分の vue プロジェクトを見つけて、npm run build コマンドを入力します。これにより、vue ディレクトリに dist フォルダーが生成され、その中に vue プロジェクトが含まれます。

次に、dist フォルダーを開いて内容をコピーします。その中には 2 つのファイルがあります。1 つはメイン ディレクトリである index.html で、もう 1 つは static フォルダーです。

それらをコピーし、nginx ディレクトリ内の html ファイルを開きます。デフォルトのファイルが 2 つあります。それらを直接削除し、コピーしたファイルを貼り付けます。

次にブラウザを開き、最初に変更したポート番号を入力します: localhost: 変更したポート番号、Enter キーを押すと、Vue プロジェクトが実行中であることがわかります。私の場合は次のようになります:

それでおしまい。 〜 ~~~~

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。