サーバーXiaobaiはオンラインシステムも構築できます

前回の記事に続いて、開発したシステムをAlibaba Cloudサーバーに配置し、正常に起動しました。

ここに画像の説明を挿入

01序文

前回の記事の後で、フロントエンドによって構築されたバックエンドシステムをローカルデータベースまたはオンラインデータベースに接続する方法について前回記事を書きましたが、開発するすべてのプロジェクトをローカルで実行することはできないため、それを置く必要があります他の人もあなたのパブリックネットワークアドレスを介してアクセスできるように、サーバーに配置します。今日はかなり大変でした。いくつかのピットに遭遇した後、これらの問題の解決方法を説明します。

ただし、プロジェクトをサーバーに配置する場合は、サーバーを所有している必要があります。そうでない場合、それを行う方法はありません。お持ちでない場合は、Alibaba Cloudにアクセスして購入できます。学生料金は比較的安く、年間100ドル以上です。ここでは、サーバーの操作方法を試すことをお勧めします。これは、フロントエンドとして必要なスキルの1つでもあります。

ここに画像の説明を挿入

02サーバーに接続する

まず、サーバーを購入してから接続します購入・設定方法のオンラインコンテンツがあり、とても簡単な操作です。

接続ツールを選択できます。ここではFinalShellを選択しましたが、他のものも選択できます。最初にソフトウェアを開いて新しいリンクを作成し、サーバーのパブリックIPとパスワードを入力すると、接続できます。

ここに画像の説明を挿入

ほとんどのサーバーはLinuxシステムを使用しているので、誰もがファイル操作を容易にするためのLinuxの指示を知っている必要があります。一般的に使用される命令は少数であり、基本的に複雑な命令は使用されていません。

特定のフォルダーにcdすると、cd var / www /などの複数のレベルを入力できます。
lsは、現在のフォルダーにあるファイルまたはフォルダーを確認します
現在地を確認
vim xxx xxxファイルを編集し、編集後にiと入力します。編集し、終了キー（esc）を押して、次のように入力します。wqで終了して保存
cat xxxこのファイルを見るxxx

これらを理解したら、サーバーの展開を開始できます。実際、これは比較的簡単な操作ですが、削除するためのいくつかの指示があります。エントリーやウィンドウに慣れている方に適した削除操作。

03ファイルのアップロード

接続後は、基本的にはウィンドウの操作と同じですが、プロジェクトを配置する場所を選択します。通常は、var / wwwの下に配置します。好きな場所を選ぶこともできます。どこに置くか覚えておいてください。

パス導入問題

アップロードする前に、プロジェクトをパッケージ化し、npm run buildを実行してプロジェクトをパッケージ化する必要があります。これは、プロジェクトがオンラインのときに行う必要があります。通常、通常、npm run devを使用してローカルサーバーを起動します。ただし、パッケージ化する前にいくつかの変更を行う必要があります。そうしないと、プロジェクトを配置した後でプロジェクトにアクセスできなくなります。どこを変える？

プロジェクトのルートディレクトリの下にconfigフォルダーがあり、index.js設定ファイルが含まれています。devの下のassetsPublicPathの値を次のように変更します。

dev: {
    env: require('./dev.env'),
    port: process.env.PORT || 7999,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    proxyTable: {
        '/api': {
            target: 'http://localhost:3000/api',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },

私たちが通常開発するのは「/」ですが、今度は「./」に変更する必要があります。この値は、プロジェクトがパッケージ化された後の、index.htmlで参照されるリソースの相対パスを示します。私は実際に前にこのピットに足を踏み入れたと言わなければなりませんが、前にそれを要約することはできなかったし、要約する習慣がありませんでした。今ではブログの利点を知っています。将来このピットをもう一度踏むと...ええ

静的リソース参照

プロジェクトをパッケージ化すると、ルートフォルダーの下にdistフォルダーが生成され、静的ファイルとhtmlファイルを除いて、内容を確認できます。これは単一ページのアプリケーションであり、最終的に1つのエクスポートのみがエクスポートされます。

以前に作成したサーバーフォルダーの下のindex.jsファイルを変更できます。以前にExpressフレームワークを使用したため、次のように追加しました。

const path = require('path');
app.use(express.static(path.join(__dirname, '../dist')));

ここでの意味は、静的ファイルの内容を紹介することです。プロジェクトを参照しないと、プロジェクトは開始されず、ページは表示されません。

Nginxプロキシの問題

私たちのオンラインWebサイトは他の人が参照できるようにするため、すべてのリクエストをプロジェクトのアドレスに送信できるようにプロキシを設定します。構成する前に、まずnginxサーバーをインストールする必要があります。これはサーバー上で比較的簡単です。もちろん、サーバーにはノード環境も必要です。1行のコマンド：

npm install -y nginx

次に、インストールが完了したら、構成ファイルに移動して確認します。デフォルトのパスは/etc/nginx/nginx.confにあり、変更する必要はありません。catコマンドで確認できますが、設定したい場合はvimコマンドを使用してください。ここでは、vimコマンドを使用して、次の私の構成のように、サーバーを検索します。

ここに画像の説明を挿入

server_nameはIPアドレスです。ドメイン名を書き込むこともできますが、ドメイン名に関連する設定と解決が必要です。ここでは無視します。次に、プロジェクトを書き込んだ場所がここに表示され、var / www / vue-adminの下に配置しました。変更後、終了して保存します。nginxサーバーを再起動します。再起動しないと、構成が有効にならない場合があります。

service nginx restart

この構成の後、パブリックIP +ポート（デフォルトのポート80）にアクセスするたびにプロジェクトが見つかり、プロジェクトが表示されます。要約すると、私たちは実際にバグを書くこととバグを見つけることを行き来しています。

ここに画像の説明を挿入

04プロジェクトを開始する

心配する必要はありません。上でいくつかの設定を行いましたが、プロジェクトはまだ開始されていません。必要なのは、関連する依存関係を最初にインストールすることです。プロジェクトのpackage.jsonファイルをdistフォルダーと同じレベルにアップロードしてから、npm installを実行します。インストールが成功しない場合、またはネットワーク速度が非常に遅い場合は、国内のTaobaoミラーに切り替えることができます。

npm install --registry=https://registry.npm.taobao.org

このプロセスには少し時間がかかる場合があります。インストールが完了したら、サーバーフォルダーに入り、ノードindex.jsを実行してサービスを開始します。データベースに接続します。作成したインターフェイスを使用してデータベースにクエリを実行できます。データベースにオンラインでアクセスできないため、ローカルデータベース接続を使用できないことに注意してください。サーバーにmysqlサーバーをインストールし、そこにデータをインポートすることをお勧めします。この部分も比較的単純です。ワンクリック。

プロジェクトの開始後、IP +ポートを入力してプロジェクトにアクセスできます（例：12.56.567.789:3000）。デフォルトではポート80であるため、私のポートはすでに使用されているため、起動後にサーバーが監視するポート3000を使用します。ここでは他のポートに変更できますが、アクセスするときにも変更する必要があります。

学生のサーバーポートが開いていない可能性があり、プロジェクトの操作が失敗する可能性があります。AlibabaCloudコンソールにアクセスして、セキュリティグループの構成を確認し、ポートを開くことができます。毎回面倒なためです。すべてのポートが開いています。

偶然がなければ、私たちはあなた自身のプロジェクトを見ることができます、エラーまたは他のものがあるならば、あなたはブラウザコンソールを見ることができます。しかし、ここで問題が発生します。つまり、サーバーをシャットダウンすると、サーバーサービスが停止します。これは問題です。私のページは、このように永久にハングアップすることはできません。したがって、待機するプロセスと呼ばれる比較的牛のpm2を使用します。

ここに画像の説明を挿入

05 pm2

正直なところ、このことを初めて聞いたときは、触っていなかったのでかなり力強く感じました。実際、それを使用すると、npmパッケージをインストールするのと同じ原則を感じるでしょう。

まず、操作をインストールするために使用する必要があります。また、それを取得する簡単なコマンドでもあります。/ディレクトリの下で次のコマンドを実行します。

npm install -g pm2

それを環境変数に追加すると、次のようになります。

vim /etc/profile

ファイルの一番下に追加します。

export NODE_HOME=/root/node-v8.9.1-linux-x64
export PATH=$PATH:$NODE_HOME/bin

終了して保存した後、このファイルを再コンパイルします。

source /etc/profile

これまでのところ、pm2のインストールと構成のプロセスを行ったので、プロジェクトを楽しく開始します。サーバーフォルダーの下で、次のコマンドを入力します。

pm2 start index.js

ウィンドウを閉じても、プログラムは完全に機能することがわかりました。これまでのところ、構成とすべての手順は完了しており、全員がプロジェクトを正常に完了しているはずです。

06まとめ

実際、プロセス全体を思い出すと、それが簡単であると言うのは少し面倒ですが、これは常に私たちが試さなければならない操作です。最初に連絡したとき、私は基本的なコマンドすら持っていませんでしたが、大丈夫です。とにかく、壊れた場合は再インストールできます。コンピュータのクラスメートは、この面倒な設定については少し考えてください。後で連絡するため、事前に練習してください。

最初からうまく実装できていれば、もう少し白くないと思いますが、サーバーのベテランになりました。サーバーに興味がある場合は、Linux関連の手順について詳しく知ることができます。将来的には、運用保守技術者に切り替えることも不可能ではありません。

ここに画像の説明を挿入