VueJSフロントエンドとExpress RESTバックエンドを結合しますか？

Question

私はVueとNodeを初めて使いました。私はプロジェクトの構造を理解しようとしています。

一方、私は "vue init webpack myproject"ベースのフロントエンドを持っていますが、一方で私はExpress + MongoDBベースのREST APIを持っています。 Vue-projectはすべてのデータ処理などにREST APIを使用しています。現在、これらの2つを別々のGitリポジトリに分割しています。これはフロントエンドとバックエンドがはるかに疎結合しているはずなので、これは私には意味があります。

しかし、テストとプロダクションのデプロイメントに関しては、まだ十分な作業プロセスがありません。私の計画は、フロントエンドとバックエンドの両方を同じWebサーバー上にホストすることです。初期展開は、フロントエンドプロジェクトで 'npm run build'を行い、genereatedファイルをバックエンドプロジェクトの\ staticフォルダに手作業でコピーし、最後に 'npm run start'でバックエンドサーバを起動することで、初期展開が完了しました。

これは気分が悪く、フロントエンドとバックエンドを展開するためのより良い方法があると確信しています。

展開プロセスを改善する方法に関するご意見やヒントはありますか？

Answer 1

webpackを使用してvueプロジェクトを構築する場合は、バンドルされたアプリケーションファイルが保存されるbuild/distフォルダを設定する必要があります。

エクスプレスアプリでは、ビルド/ディストリビューションフォルダを指す静的ファイルを提供するための "エンドポイント"を設定できます。

あなたのアプリを提供するときにインデックスがこのファイルを取得します。

それは私がそれを持っているとして、あなたが上から下にそれを読むことをお勧めします

https://webpack.js.org/guides/getting-started/

構築DEVとPRODの両方を作成するプロセスを取るために来るときWebPACKのドキュメントが、非常によく行われています

app.use('/static', express.static(path.join(__dirname, 'dist'))) 

：ラインに沿って

をあなたの時間を節約しますそして、あなたのDISを指すようにExpressを設定すると便利に関する情報の束は、あなたがそのような何かを行うことができますフォルダ

そしてそのようなインデックスからファイルを呼び出します。

<script src="/static/bundle.js"></script> 

これがあなたが探していた答えであるかどうか教えてください。