Alibaba Cloud Linux の nginx は uni-app の H5 フロントエンド プロジェクト Vue を構成し、バックエンド インターフェイスは Alibaba Cloud です。

背景

vue プロジェクト呼び出しインターフェイスは Alibaba Cloud からのものであり、H5 Web サイトも Alibaba Cloud にデプロイする必要があります。2 つの異なるサーバーには nginx デプロイメントと API プロキシが必要です。

1.ポート構成

もちろん、最初のステップは Alibaba Cloud サーバーを購入することです。ここでは Linux システムの構成を示し、アクセスするドメイン名を構成します。

Web サイトに必要なポートを次のように構成します。

設定後、端末は開く対応するポート番号を指定します。以下を参照してください。

Alibaba Cloud サーバーのポート番号を設定し、Alibaba Cloud Web ページで新しいポートを開いた後、ファイアウォールを再起動しましたが、ポートがアクティブ化されませんでした_Lan.W のブログ - CSDN ブログ ここでは 8083 を使用してい ます

firewall-cmd --zone=public --add-port=8083/tcp --permanent  

2.nginxサーバーのインストールと構成

nginx ソースコードをダウンロードしてコンパイルした後、/usr/local/nginx/nginx.conf でサイト情報を設定します。

 nginx 上で構成されたサイトと API プロキシ 

Web サイトのディレクトリを配置します。

実行する準備ができました。 

ドメイン名形式のバックエンドにアクセスするドメイン名 Web サイトであっても、nginx を通じて問題なく処理して実行できます。


3. ドメイン名にリンクされたサブ Web サイト 

アクセスパス:http://xx.xx.com/cloudh5  

Hbuilder パッケージ化: h5 の基本的な実行パス構成: /cloudh5

 パッケージ化された h5 ディレクトリ内のすべてのファイルを nginx の html/cloudh5 にコピーします。

nginxの設定:

    場所 /cloudh5 {             ルート /usr/local/nginx/html;             インデックスindex.htmlインデックス.htm;         }


}

 API インターフェイス プロキシは依然として同じであり、変更する必要はありません。./ による基本的な実行パス構成は同じです。

おすすめ

転載: blog.csdn.net/LlanyW/article/details/132920722