序文
この記事を読む前に、事前にTencentサーバーを購入し、Xshellに接続する必要があります。他のクラウドサーバーも利用可能で、操作は基本的に同じです。
著者がサーバーにフルスタックプロジェクトをデプロイするのはこれが初めてであるため、私は多くの落とし穴に遭遇し、それを解決するのにほぼ1日かかりました。
この記事を作成する目的は、次の使用のためにプロジェクトを立ち上げるプロセスを整理すると同時に、友人がプロジェクトを迅速に展開し、多くの落とし穴をなくすのを助けることです！！！
操作する
パゴダパネルを取り付ける
宝塔これは、安全で効率的なサーバーの操作および保守パネルであり、Linuxの操作に慣れていない小規模なパートナーにとって非常に便利です。まず、Xshellでサーバーを接続し、サーバーの種類に応じて次のコマンドを実行することを選択する必要があります
- Centosインストールスクリプト
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
- Ubuntu/Deepinインストールスクリプト
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh
- Debianインストールスクリプト
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh
- Fedoraインストールスクリプト
wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh
たとえば、私はubuntuの仮想マシンです。Xshellでサーバーに接続した後、次のコマンドを実行します。
インストールプロセス中に選択肢がある場合は、 yを選択し、Enterキーを押します。インストールが成功すると、次のインターフェイスが表示されます（xxx.xxx.xxx.xxはサーバーアドレスを示し、ユーザー名とパスワードは保存するためのログインパゴダの名前です!!!）。
Bt-Panel:http//xxx.xxx.xxx.xx:8888
username:xxxx
password:xxx
このとき、サーバーにアクセスしてポート8888
を開き、それを開いhttp//xxx.xxx.xxx.xx:8888て、ユーザー名とパスワードを入力してログインする必要があります。
ログインに成功すると、推奨されるインストールソフトウェアがポップアップ表示され、ワンクリックでインストールできますLNMP（推荐）。
データベースを作成し、データをインポートします
左側のデータベースを選択し、[データベースの追加]をクリックして、データベース名、ユーザー名、データベースパスワードを入力し、データベースタイプ（私が使用するMysql）を選択して、送信します。
ベーステーブルをインポートします。[インポート]をクリックしてローカルSQLファイルを直接インポートし、[管理]をクリックして表示
します。テーブルが既に存在する場合、インポートは成功します。それが機能しない場合は、Navicatでエクスポートした.sqlファイルに挿入ステートメントしかない（つまり、テーブルが作成されない）ため、見下ろしてください。インポートを直接クリックすると成功しません。
最初にSQLステートメントを使用してテーブルを作成する必要があります。SQLステートメントに慣れていない場合は、CREATE TABLEこの記事で基本的なSQLテーブルの定義、削除、および変更を確認できます。
SQLステートメントを記述した後、[実行]をクリックすると、空のテーブルが作成され、データのインポートが成功します。
バックエンドの展開
まず、パゴダの安全な場所でバックエンドインターフェイスをリリースする必要があります。ここで8889をリリースしました。リリースするポートを決定できます。Tencent Cloudでは、対応するポートを解放し、バックエンドプロジェクトのデータベース接続を作成したばかりのデータベースの情報に置き換える
必要もあります。
注意：ここではサーバーのループバックアドレスを参照してhost: '127.0.0.1'いるため、サーバーのIPに変更しないでください。127.0.0.1
// 2. 建立与 MySQL 数据库的连接关系
const db = mysql.createPool({
host: '127.0.0.1', // 数据库的 IP 地址
user: 'xxx', // 登录数据库的账号
password: 'xxxx', // 刚所建数据库的密码
database: 'my_db_01' // 指定要操作哪个数据库
})
同時に、サーバーがリッスンしているポートを、開発したポートに変更します。これは8889です。
// 创建端口号
const port= 8889;
// 调用app.listen(端口号，启动成功后的回调函数) , 启动 web 服务器
app.listen(port, () => {
console.log(`express server running on port ${
port}`);
})
すべてが保存および圧縮されwww/wwwroot/たら、ディレクトリにフォルダを作成し、このフォルダの下にバックエンドプロジェクトの圧縮パッケージをアップロードします。
アップロードが成功したら、現在のディレクトリに解凍します。
ソフトウェアモールでPM2Managerを検索し、ダウンロードします。（私はすでにこれをダウンロードしました〜）
PM2マネージャーを開き、プロジェクトを追加します、
- スタートアップファイルはあなたのもの
app.jsかserver.js - 実行ディレクトリは、アップロードしたバックエンドプロジェクトのディレクトリです
- プロジェクト名は実情に応じて記入できます
ついに保存!!
この時点で、プロジェクトは開始中です。エラーをクリックしてエラーログを表示し、エラーがある場合は1つずつ解決します。エラーがない場合は、正常に動作していることを意味します。
Postmanにアクセスしてインターフェイスをテストし、インターフェイスに正しくアクセスできることを確認してから、フロントエンドをデプロイできます。！！
フロントエンドの展開
後でリバースプロキシvue.config.jsを使用するため、フロントエンドプロジェクトの構成は削除できます。devServernginx
devServer: {
proxy: {
// 配置跨域
'/api': {
target: 'http://xxx.xxx.xxx.xxx:8889/api/',
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
}
ルートの動作モードが履歴の場合は、ハッシュに変更する必要があります。そうしないと、ページが更新されたときに404の問題が発生します。！！
const router = new VueRouter({
mode:'hash',
...
実行npm run buildしてdistファイルを生成します
。同様に、distファイルを圧縮し、バックエンドファイルと同じレベルのディレクトリにアップロードしてから解凍します。
パゴダのウェブサイトをクリックし、サイトを追加してから、自分のIPアドレスとファイルアドレスに応じて次の情報を入力します。
最後に、[設定]をクリックします。
nginxプロキシを構成すると、内部のアドレスがフロントエンドプロキシサーバーのアドレスを書き込みます（非常に重要です。そうしないと、エラーが報告されます!!!）
location ^~/api/ {
proxy_pass http://xxx.xxx.xxx.xxx:8889/api/;
}
図に示すように、プロキシが設定されていない場合、404エラーが発生します。
これまでのところ、フロントエンドとバックエンドがデプロイされ、正常にアクセスされています。！
この記事があなたに役立つと思うなら、ブックマークしてそれを好きになることを忘れないでください！！