Nginx を使用して Vue アプリケーションを公開する

このチュートリアルでは、Nginx を使用して Vue アプリケーションを公開する方法を説明します。Nginx は、静的 Web ページ、リバースプロキシ、負荷分散などの展開に使用できる高性能のオープンソース Web サーバーです。Vue は、最新のシングルページアプリケーションを構築するための人気のある JavaScript フレームワークです。

ステップ 1: Nginx をインストールする

まず、Nginxをインストールする必要があります。次のコマンドを使用して、Ubuntu に Nginx をインストールできます。

sudo apt update
sudo apt install nginx

インストールが完了したら、次のコマンドを使用して、Nginx が正常にインストールされたかどうかを確認できます。

nginx -v

ステップ 2: Vue アプリケーションをビルドする

始める前に、ローカル環境に Vue CLI がインストールされていることを確認してください。インストールされていない場合は、次のコマンドを使用してインストールします。

npm install -g @vue/cli

次に、Vue CLI を使用して新しい Vue プロジェクトを作成します。

vue create my-vue-app

プロジェクトディレクトリを入力します。

cd my-vue-app

次のコマンドを実行して Vue アプリケーションをビルドします。

npm run build

ビルドが完了すると、dist生成された静的ファイルがディレクトリに保存されます。

ステップ 3: Nginx を構成する

次に、Vue アプリケーションを提供できるように Nginx を構成する必要があります。Nginx 構成ファイルを開きます。

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

serverブロック内に次の構成を追加します。

server {
    
    
    listen 80;
    server_name your_domain.com;

    root /path/to/your/vue/app/dist;
    index index.html;

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

必ずyour_domain.comドメイン名と/path/to/your/vue/app/distVue アプリケーションの実際のパスに置き換えてください。

ファイルを保存して閉じた後、次のコマンドを使用して Nginx サービスを再起動します。

sudo systemctl restart nginx

ステップ 4: Vue アプリケーションにアクセスする

これで、ブラウザにドメイン名を入力して Vue アプリケーションにアクセスできるようになりました。Nginx は静的ファイルを提供し、すべてのリクエストをリダイレクトして、index.htmlVue アプリケーションが適切に実行できるようにします。

おめでとう！Nginx を使用して Vue アプリケーションが正常にデプロイされました。

結論は

このチュートリアルでは、Nginx を使用して Vue アプリケーションを公開する方法について説明します。Vue アプリを静的ファイルとして構築し、Nginx を使用してそれらのファイルを提供することで、Vue アプリを実稼働環境に簡単にデプロイできます。このチュートリアルがお役に立てば幸いです。また、Vue アプリの公開が成功することを祈っています。