AlibabaCloud軽量アプリケーションサーバーはNode.js + React + MongoDBフロントエンドとバックエンドの分離プロジェクトを展開します

最近、フロントエンドReact、バックエンドNode.js（Koa2）、データベースMongoDBフロントエンドおよびバックエンド分離プロジェクトをAlibaba Cloud Serverでデプロイしました。その過程で、多くの落とし穴を踏みました。この記事を使用してください。特定のステップを記録します。お役に立てば幸いです。

1.サーバーの選択と購入

すべてのタイプのサーバーは、Alibaba Cloud公式Webサイトの製品ページで確認できます。インターネットでの私の観察によると、ほとんどの人がECSクラウドサーバーと軽量アプリケーションサーバーを使用しています。軽量アプリケーションサーバーは、ECSクラウドサーバーに基づいて開発された製品です。「軽量」という言葉を強調したエントリーレベルのクラウドコンピューティングとシンプルなアプリケーションは、私たちの個人的なプロジェクトで使用するのに十分です。サーバーが永続的な高負荷操作を実行する必要がある場合は、ECSクラウドサーバーを使用できます。（具体的な違いについては、ECSクラウドサーバーとLightweightアプリケーションサーバーの違いを参照してください）。ここでは、軽量のアプリケーションサーバーを使用しています。

軽量アプリケーションサーバーの購入ページに入り、自分の地域に近いサーバー地域を選択します。もちろん、中国でサーバー地域を選択した場合は、ドメイン名を提出する必要があります（ただし、サーバーのIPに直接アクセスすることもできます。ドメイン名を使用）、申請プロセスには10日以上かかる場合があります。オンラインへの移行を急いでいる場合は、香港の地域を選択できます。欠点は、地域から遠く離れている可能性があり、遅れ。ミラーリングでは、システムミラーリングとアプリケーションミラーリングを選択する必要があります。Webサイトの構築にアプリケーションを使用しない場合は、Linuxシステムにあまり詳しくないため、ここではシステムミラーリングを選択します。そのため、システムミラーリングにはwindows2019データセンターバージョンを選択しました。構成私は自分のポケットに恥ずかしがり屋なので、最も低いバージョンを選びました。他のデータディスクを追加する必要はありません。購入期間は、状況によって異なります。

最近AlibabaCloudが開発者の成長計画を開始したため、3か月以上を選択すると大幅な割引があります。学生の方は、学生限定の特典もご利用いただけます。

2.ドメイン名の購入

この手順は不要です。サーバーにマッピングされたドメイン名を購入してアクセスするか、サーバーのIPを直接使用してアクセスすることができ、ドメイン名の登録に時間がかかります。この手順では、必要かどうかを検討してください。実際の状況に応じてドメイン名を使用します。

ドメイン名はAlibabaCloud.comで購入します。登録するドメイン名を入力して（すでに登録されているかどうかを確認してください）、購入します。実際の状況に応じて別のサフィックスを選択します。ドメイン名を購入した後、実名認証を実行し、ID情報を使用する必要があります。このプロセスは一般的に非常に高速で、数分で実行できます。（コントロールパネル-製品とサービス-ドメイン名-ドメイン名リスト-独自のドメイン名を表示し、[管理]を選択します）。

3.ドメイン名の解決

ドメイン名の実名認証後、ドメイン名解決を行うことができます。（サーバーが中国にある場合は、認証後に提出する必要があり、実名認証後2〜3日間しか提出できません）いわゆるドメイン名解決は、ドメイン名とサーバーのIPバインディングをバインドすることです。ユーザーがドメイン名にアクセスできるようにします。サーバーIPへのマッピングが自動的に解決されます。具体的な手順は、サーバーを開き、左側の列のサイト設定で「ドメイン名」を見つけて解決することです。ここで、私のドメイン名は解決されました。

4.プロジェクトコードをサーバーに転送します

私はMacを使用しているので、Macでリモートサーバーを操作する端末にはMicrosoft Remote Desktop Betaをお勧めします。インターフェイスはエレガントで、操作は便利です。Microsoftリモートデスクトップベータ版は、検索エンジンにアクセスしてダウンロードを検索できます。

ダウンロードが完了したら、サーバーアカウントとパスワードを入力して接続します。アカウントとパスワードは、軽量アプリケーションサーバーの「サーバーの運用と保守」-「リモート接続」で設定できます。この時点で、に接続できます。リモートサーバー。

プロジェクトコードをサーバーに転送するには、いくつかの方法があります。

githubを使用し、コードをローカルでgithubにアップロードし、サーバー側のgithubでコードをプルします
Macユーザーは、システム端末に付属のコマンドラインを使用します
ファイル転送にfilezillaを使用する

ここでは最初の方法をお勧めします。gitの使用は誰にとってもなじみのないものではないと思います。使用する前に、サーバーにgitをインストールすることを忘れないでください。gitのインストールは、gitの公式Webサイトから直接ダウンロードできます。

5.インストールの依存関係

私のプロジェクトを例にとると、インストールする必要のある依存関係は、node、npm、MongoDBです。

nodeとnpmのインストールは、公式Webサイトから直接ダウンロードでき、npmにはnodeが付属しています。nodeをインストールすると、npmが表示されます。npmを最新バージョンにアップグレードする場合は、直接実行してください。

npm upgrade

MongoDBののインストールは、Windowsシステムの下にMongoDBをインストールする場合は、を参照してください、もう少し厄介です：WindowsでのインストールのMongoDB （壁を覆す必要性を）

他のシステムは、独自のBaiduにMongoDBをインストールできます

6.プロジェクトのパッケージ化

これまでのところ、プロジェクトはリモートサーバーにアップロードされており、関連する依存関係もインストールされています。次のステップは、プロジェクトコードをパッケージ化することです。

フロントエンドプロジェクトのパッケージ化には、通常webpackを使用します。私のフロントエンドプロジェクトはcreate-react-appに基づいて作成されており、vue-cliについても同じことが言えます。

最初にプロジェクトを入力して依存関係をインストールします。

npm install

次に、パッケージ化コマンドを実行します。

npm run build

パッケージ化が完了すると、プロジェクトのファイルディレクトリにビルドフォルダが表示されます。これは、パッケージ化した静的ファイルです。ユーザーがドメイン名を入力してページにアクセスするときは、index.htmlファイルを返す必要があります。このフォルダ内のユーザーに。

koa2に基づいてバックエンドを作成しましたが、エクスプレスまたはその他のフレームワークを使用しています。バックエンドはサーバー上で実行されているだけです。バックエンドをローカルで実行する原則は同じです。コマンドは次のとおりです。

npm install 
npm run serve

最初に依存関係をインストールしてから、サービスを開始します

7.nginx構成

ローカルで開発する場合、通常はsetProxy.jsファイルを使用して、クロスドメインを実現するために転送します。通常、サーバー上でnginxリバースプロキシを使用してクロスドメインを実現します。次に、nginxを使用してフロントエンドの静的ファイルプロキシサーバーとして機能する必要があります。

Nginxは公式ウェブサイトからダウンロードできます。ダウンロードが完了したら、ダウンロードしたフォルダーを解凍し、confフォルダーにあるnginx.confファイルを開きます。構成を変更する必要がある場所は次のとおりです。

server {      
    listen       80;  
    server_name  112.74.55.172;
    location / {
     root   "C:\Users\Administrator\Desktop\code\sysu-competition-system\build";
     index  index.html index.htm;
     try_files  $uri $uri/ /index.html;
    }
}

まず、ポート80をリッスンしても問題ありません。ドメイン名またはサーバーIPを入力すると、デフォルトでポート80が開きます。server_name、サーバーがドメイン名にバインドされている場合は、ここにドメイン名を入力します。 sysyu-competition.topなど、ドメイン名がない場合は、ドメイン名をバインドするために、私が行ったように直接ipを入力します。以下のlocaltion / rootは、前のフロントエンドをパッケージ化した後に生成された静的フォルダーの場所です。 step; indexはビルドフォルダの下のエントリファイルを表します。変更する必要はありません。エントリファイルがindex.htmlでない場合は、デフォルトの構成を使用してから、手動で変更してください。try_files構成は主に、ユーザーが更新したときにフロントエンドページが404になるのを防ぐためのものです。具体的な原則はBaiduです。

この構成は、URL http://112.74.55.172を入力すると、ルートパスがヒットし、rootによって構成された静的ファイルがブラウザーに返され、ページがロードされることを意味します。変更が完了したら、nginx.exeフォルダーディレクトリに次のように入力します。

nginx -t

構成ファイルで構文エラーを確認してください。そうでない場合は、次のように入力します。

start nginx

nginxを起動してプロキシを実現します。

nginx.confファイルを変更するたびに、次のように入力します。

taskkill /IM  nginx.exe  /F

すべてのnginxプロセスを強制終了してから、startコマンドを入力してnginxを開始するには、構成が有効になります。この時点で、ドメイン名（またはサーバーIP）を入力すると、フロントエンドの静的ページが表示されるはずですが、フロントエンドとバックエンドのインターフェイスはまだ接続されていません。

8.AlibabaCloudサーバーのオープンポート

示されているように、Aliが開いたクラウド上のファイアウォールのニーズのポートの周りを実行します。実行のフロントエンド、ポート80、ポート8000の安全性で実行されているバックエンドのポート-ルールの追加-ファイアウォールがオンになっています下の2つのポートでは、使用する必要のあるポートにアクセスするために、ここで開くことを忘れないでください。（ECSサーバーの場合は、セキュリティグループの下にあります）

9. nginxは、フロントエンドとバックエンドのクロスドメイン問題を解決します

フロントエンドプロジェクトとバックエンドプロジェクトは異なるポートで実行され、直接リクエストするとクロスドメインが発生します。nginxを使用して、フロントエンドとバックエンドの通信のクロスドメイン問題を実現します。特定の構成情報は、confフォルダーのnginx.confファイルにあります。次のコード行を追加します。

server {      
    listen       80;  
    server_name  112.74.55.172;
    location / {
     root   "C:\Users\Administrator\Desktop\code\sysu-competition-system\build";
     index  index.html index.htm;
     try_files  $uri $uri/ /index.html;
    }

        location  ~/api/ {
        proxy_pass http://0.0.0.0:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection ‘upgrade’;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

}

フロントエンドコードのリクエストバックエンドのインターフェース形式は次のとおりです。

http://公网ip(域名):前端运行的端口/api/xxxxx

フロントエンドは独自のIP（ドメイン名）とオペレーティングポートを要求し、クロスドメインはありません。次に、nginxが〜/ api /のリクエストにヒットすると、proxy_pass属性に従ってバックエンドの実行ポート8000にリクエストをプロキシします。この〜/ api /のヒットルールは、リクエスト形式に応じて変更され、 proxy_passのプロキシポートも、バックエンド実行ポートの変更に基づいています。リクエストが/ api /に一致すると、以下のルールに準拠し、リモートサーバーのローカルバックエンド実行アドレスにプロキシするため、クロスが解決されます。 -ドメインの問題。これまでのところ、フロントエンドとバックエンドのクロスドメインは解決しました。

補足：バックエンドサービスが設定されている場合

Access-Control-Allow-Origin:'*'

フロントエンドとバックエンドのクロスドメインの問題を解決すると、フロントエンドコードで直接リクエストできます

http://公网ip(域名):后端运行的端口/api/xxxxx

nginxプロキシがなくても、クロスドメインを実現できます

10.フロントエンドがサードパーティのAPIクロスドメインの問題を要求する

私のプロジェクトでは、フロントエンドがGochuang Cloudプラットフォームのサードパーティインターフェースに携帯電話の確認コードを送信するように要求しました。プロジェクトのバックエンドAPIを要求することに加えて、AlibabaCloudまたはのサードパーティAPIもあります。私のような、リクエストする必要のある他のプラットフォームサードパーティのインターフェースの特定のリクエストアドレスは次のとおりです。

http://hn216.api.yesapi.cn/?s=App.CDN.UploadOffice&app_key=............

つまり、ドメイン名hn216.api.yesapi.cnにリクエストする必要があります。このドメイン名を直接リクエストするには、クロスドメインである必要があります。次に、プロキシを実現するようにnginxを構成できます。

フロントエンドリクエストは次のとおりです。

フロントエンドコードで要求されたドメイン名は112.74.55.172（つまり、サーバーのパブリックネットワークIP）であり、ポートは80（実際の実行ポートに応じて変更されたフロントエンド実行ポート）であるため、要求します。同じドメイン名とポート番号クロスドメインインターフェースがない場合、nginxは開始した/ uploadToGuochuangyun /リクエストと一致し、proxy_passを使用してhn216.api.yesapi.cnにプロキシします（プロキシルールはuploadToGuochuangyun /を削除します）。クロスドメインを実現します。これまでのところ、サードパーティのapiクロスドメインも解決されています。

この時点で、Alibaba Cloud軽量アプリケーションサーバーにフロントエンドとバックエンドの分離プロジェクトをデプロイするすべての手順を解決しました。まだ多くの落とし穴があります。問題が発生した場合は、Baidu /にアクセスしていつでも解決できます。ゆっくりチェックしてください。問題が発生した場合は、お気軽にお問い合わせください。コメント欄にメッセージを残してご相談ください。