web-dev-qa-db-ja.com

1つのサーバーにnodejs apiとvuejsアプリをデプロイする方法

ノードレストAPIとvuejs Webアプリケーションを開発しました。ubuntuを実行する1つのawsサーバーに両方のプロジェクトをデプロイしようとしています。両方のアプリケーションに異なるポート、ドメインがあるapiのapi.example.comとvue app。永久に実行する必要があります。

  1. アプリに個別にデプロイする
  2. アプリはポートでアクセスできます

アクセスが必要です

  1. api.example.com
  2. example.com

何をするためのステップは、ホストファイルを変更します。

これは、同じサーバーからVueJS UIとExpressJS REST APIを実行している方法です。

PM2 でサービスを管理しています。

VueJS(開発環境、同じ設定を本番環境に追加できます)

_package.json_で、_"start": "Host='0.0.0.0' PORT=80 npm run dev",_配列に_"scripts": {..}_(80はVueJSがリッスンしているポート)を追加します。次に、PM2をインストールした後、(devの場合)_cd /location/of/vue/root; Sudo pm2 start npm run dev --name Vue -- start_でVueJSを起動できます。 (Apacheが実行されていないことを確認してください)。

ホストを0.0.0.0に設定することが重要であることに注意してください。 LocalHostまたはサーバーのIPアドレスに設定しないでください。問題が発生する可能性があります。

ExpressJS

_/location/of/express/app.js_に、これをファイルの下部に追加します:app.listen(process.env.PORT || 8081)、ここで8081は、REST APIがリッスンする必要があるポートです。 _Sudo pm2 start /location/of/express/app.js --name Express_で始めます

この時点で、VueJSはwww.example.com(暗黙のポート80)で利用でき、REST APIはwww.example.com:8081で利用できます。

Api.example.com/がAPIを指すようにする場合は、DNSが「api」サブドメインを目的のポートにポイントしていることを確認する必要があります。そうでない場合は、上記のようにポートをURLに追加する必要があります。

さらに、_pm2 logs APPNAME --lines 100_を使用すると、PM2からも簡単にログを追跡できます。

PMを使用せずに1つのサーバーにvueアプリとexpress/nodejsをデプロイする別の方法を見つけました。これは私がやったこと

  1. _npm run build_コマンドを使用して、vueコードをビルドします。これにより、_index.html_ファイルとdistフォルダーが必要なstaticフォルダーが作成されます。
  2. distフォルダーをサーバーコードリポジトリにコピーします。私の場合、フォルダpublicを作成し、distフォルダをpublic内に移動しました。
  3. _app.js_行の直前の_module.exports=app_ファイルで、次のコード行をコピーします

    //These 2 lines make sure that vue and express app are coming from the same server. app.use('/static', express.static(path.join(__dirname,"../public/dist/static/"))); app.get('/', function(req,res) { res.sendFile('index.html', { root: path.join(__dirname, '../public/dist/') }); });

1行目は_/static_フォルダーがアクセス可能であることを確認し、2行目はノードサーバーの実行時に_index.html_ファイルを提供します。コンポーネント間のルーティングは、Vueによって処理されます。

4
gilango