docker-compsoe を使用してフロントエンドとバックエンドを分離したプロジェクトをデプロイする方法

vueミュージック
 ├─ .git
 ├─ .gitignore
 ├─ ライセンス
 ├─ README.md
 ├─ babel.config.js
 ├─ ディストリクト
 ├─ docker-compose.yml
 ├─ ドキュメント
 ├─ nginx.conf
 ├─ package-lock.json
 ├─ package.json
 ├─ 公開
 ├─ サーバー
 ├─ 出典
 └─ vue.config.js

バージョン: '3'
 サービス:
 music-web: フロントエンドプロジェクトの#サービス名
   container_name: 'music-web-container' #コンテナ名image: nginx #イメージを指定restart: always
   ポート:
   - 80:80
   ボリューム: 
   - ./nginx.conf:/etc/nginx/nginx.conf #nginx 設定をマウント - ./dist:/usr/share/nginx/html/ #プロジェクトをマウントdepends_on:
   - 音楽サーバー
 music-server: #バックエンドプロジェクトのサービス名
   コンテナ名: '音楽サーバーコンテナ'
   build: ./server #サーバーディレクトリのDockerfileに基づいてイメージをビルドします restart: always
   さらす：
   - 3000

#ユーザーnobody;
 ワーカープロセス 1;
 イベント {
   ワーカー接続 1024;
 }
 http {
   mime.types を含めます。
   デフォルトタイプ アプリケーション/オクテットストリーム;
   ファイル送信オン;
   #tcp_nopush オン;
   #キープアライブタイムアウト 0;
   キープアライブタイムアウト65;
   #gzip オン;
   gzip オン;
   gzip_min_length 5k;
   gzip_バッファ 4 16k;
   #gzip_http_バージョン1.0;
   gzip_comp_レベル 3;
   gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
   gzip_vary オン;
   サーバー{
     聞く 80;
     サーバー名 www.xieyezi.com;
     #音楽アプリプロジェクトの場所 / {
     index index.html index.htm; #属性を追加します。 
     root /usr/share/nginx/html; #サイトディレクトリ}
     # ミュージックアプリプロジェクト設定プロキシ転送場所 /api/ {
     proxy_pass http://music-server:3000/;
     }
     エラーページ 500 502 503 504 /50x.html;
     場所 = /50x.html {
       ルート /usr/share/nginx/html;
     }
   }
 }