ノードレストAPIとvuejs Webアプリケーションを開発しました。ubuntuを実行する1つのawsサーバーに両方のプロジェクトをデプロイしようとしています。両方のアプリケーションに異なるポート、ドメインがあるapiのapi.example.comとvue app。永久に実行する必要があります。
アクセスが必要です
何をするためのステップは、ホストファイルを変更します。
これは、同じサーバーから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をデプロイする別の方法を見つけました。これは私がやったこと
npm run build
_コマンドを使用して、vueコードをビルドします。これにより、_index.html
_ファイルとdist
フォルダーが必要なstatic
フォルダーが作成されます。dist
フォルダーをサーバーコードリポジトリにコピーします。私の場合、フォルダpublic
を作成し、dist
フォルダをpublic
内に移動しました。_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によって処理されます。