要件の背景: フロントエンドとして、特に中小企業の場合は、デプロイメントについても理解する必要があります。今回はフロントエンド基本プロジェクトのデプロイについて紹介します。今回はAlibaba Cloudサーバーを利用した導入
コアステップをデプロイする
1. パッケージ化されたフロントエンド コード (dist パッケージ) または html ファイルを準備します。
2. Alibaba Cloud サーバーを購入して接続します。
3. Alibaba Cloud サーバーに ngnix をインストールして、Web サービスを開きます。
4. xshell と sftp を使用して、フロントエンド コードをサーバー上に配置する
1. フロントエンドコードを準備する
この部分は簡単なので、好きなように準備できます。ここでは vue のスキャフォールディングを設定してから、dist パッケージを作成しました。
面倒ならhtmlファイルを直接使って、そこに何か書いても大丈夫です
2. Alibaba Cloudサーバーを購入する
練習用なら一番安いものを買っても大丈夫です。実際には、何も問題はありません。国内リージョンを選択し、最も安価な最低構成を選択してください。通常、オペレーティング システムは centOS64 を選択します。パブリック ネットワーク IP の無料割り当てにチェックを入れるだけです。
購入が完了した後、それがどこにあるのかわからない場合があります。コンソールをクリックして、クラウド サーバー ECS を見つける必要があります。
次に、サーバーを見つけることができます。そのうち最も重要なのは、インスタンス (サーバーのステータスの管理) とセキュリティ グループ (サーバーにアクセスできるポート番号の制御) です。
インスタンス内のリモート接続をクリックして、正常に接続できるかどうかを確認します。ここでの ip アドレス (パブリック) は、後で接続するサーバーの ip アドレスであり、他の人があなたの Web サイトにアクセスするためのアドレスでもあります。
ページにこれが表示された場合は、リモート接続が成功したことを意味します
3. ngnix をインストールして Alibaba Cloud サーバーの Web サービスを開きます
a. 準備: xshell (サーバーへの接続に使用) と xftp (ファイルのアップロードに使用) をインストールします。
これら 2 つのソフトウェアをインストールする方法: 360 Security Guard から直接インストールします。高速で無毒です。
b. xshell を開き、リモート サーバーに接続します。
その後、ユーザー名 (通常は root) とパスワードの入力を求めるポップアップが表示されます。ようやく接続が成功しました
おめでとうございます。サーバーと通信できるようになりました。先ほどクラウド サーバーにリモート接続することもできますが、一般的には xshell を使用する方が便利です。
ここで接続できない場合は注意してください。それなら私の足元に注意してください！！！！とても重要です！！！クラウド サーバー ページに移動して、セキュリティ グループを設定します。この手順は全員に実行することをお勧めします。！！！
エントリ 22 を追加します (これは、xshell に接続されているポート番号と一致している必要があります。xshell のデフォルトは 22 です)。他のオプションは図に示されています。
上記と同じ手順で、nginx の別の 80 エントリを追加します。
c. リバース プロキシ nginx
コマンドをインストールします: yum install nginx
次に、選択できるように途中で停止します。y を入力して Enter キーを押します。最後に、インストールは成功します。
これが完了すると成功を意味します
が、この時点ではサーバーに nginx がインストールされているだけで、リモート サーバーで nginx サービスは開始されていません。ここでは使用するコマンドをいくつか紹介します。最初にすべてをリリースし、後でいくつかを使用します。(ngnix に nginx と入力しないように注意してください!!!!!!!!!! いつも間違えます)
nginx をインストールします: yum install nginx
で ngnix プロセスがあるかどうかを確認します: netstat -anput | grep nginx
でサーバー ポートを確認しますoccupancy : netstat -ntlp
nginx start: nginx
nginx restart: nginx -s reload
close nginx:
nginx -s stop: nginx をすばやく停止
nginx -s quit: nginx を完全かつ正常に停止
デフォルトの nginx 設定ファイル パスを表示します: nginx -t
d. nginx
コマンドを開始します: nginx、通常、入力後にフィードバックはありません。nginx が開始されたかどうかわからない場合は、コマンド netstat -anput | grep nginx を使用して、nginx ポートが占有されているかどうかを確認できます。上の図
のように、このコマンド netstat -anput | grep nginx を入力して、占有されているポートがあるかどうかを確認できます。
明らかに、ここではポート 80 を nginx が占有しているので
、ブラウザに外部 IP アドレスを入力します。ページ (通常は centos または nginx ページ) にコンテンツがある場合、nginx が正常に開始されたことを意味します。私がここにいるのは、ページを配置したからです。つまり、ページがあります。あなたのものはこのページであるべきではありませんが、テキストがあります。指示は正しいです。
e. ファイルをサーバーに置きます
。xshell をクリックして新しいファイルを転送すると、ダウンロードしたばかりの xftp が開きます。
右側はクラウドサーバーのデスクトップです。右クリックして新しい Web フォルダーを作成し、その中に新しい html1 フォルダーを作成し、そこに dist ファイルを転送します。
地元のものをどのように置くか？フォルダーの空白部分にドラッグ＆ドロップするだけです
f. nginx ファイルを変更し、nginx サービスが独自の html ファイルをプロキシできるようにします
まず、デフォルトの nginx 設定ファイルのパスを見つけます: nginx -t
xftp でファイルを見つけてコンピュータに転送します (デフォルトではデスクトップに転送されます)。
vscode を使用して (vscode を使用せず、ウェブストームとメモ帳も使用できます)、主にここのパスをアップロードしたパスに変更します。
次に、サーバー上の nginx.conf ファイルを上書きします (つまり、サーバーにアップロードしてドラッグします)。
g. nginx を再起動します (nginx は nginx.conf 設定の変更が必要で、有効にするには再起動する必要があります)
xshell を開きます: nginx -s reload, restart と入力します。再起動後に応答がありません。これは正常です。パニックにならないでください。
このとき、ブラウザを使用して IP アドレスを開きます。自分の Web ページが表示された場合は、Web ページが正常に起動されたことを意味します。IP を誰にでも送信でき、その人はあなたの Web サイトにアクセスできます。
