Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワークを使用し、フロントエンドには Vue フレームワークを使用しました。プロジェクトのフロントエンドとバックエンドは完全に分離されていました。デプロイ中にいくつか問題が発生したので、記録しました。

デプロイメント環境: centos6.5Python3.6.3flask0.12.0 vue

デプロイメント方法: uwsgi+nginx

ステップ:

​ 1. まず、通常の Python ランタイム環境をインストールします。 ​ 2. uswsgi をインストールして通常どおり実行します (インストールには pip を使用します。pip install uwsgi):

新しいconfig.iniファイルを作成する

[uwsgi]

# uwsgi の起動時に使用するアドレスとポート。Nginx プロキシはこのアドレスに転送する必要があります socket = xxxx:xxxx    
#Python 環境ディレクトリ #home = /usr/local/python/bin
#ウェブサイトのルートディレクトリを指定します chdir = /root/www
#python プロジェクトの起動プログラム ファイル wsgi-file = /root/www/run.py
#Pythonプログラムを起動するために使用するアプリケーション変数名 callable = app
#プロセッサ数 = 3
#スレッド数 threads = 3
#ステータス監視アドレス stats = 127.0.0.1:5000
#uwsgi パッケージ解析用の内部バッファ サイズを設定します。デフォルト 4k
バッファサイズ = 32768

uwsgi 起動コマンド:

uwsgi config.ini #このコマンドは直接uwsgiを起動します -d --ini config.ini #このコマンドはバックグラウンドで実行されます。一般的には

3. nginxをインストールします。正常です。私たちはインストールの保守と操作をしていますが、プロセスは表示されませんので、Baiduを参照してください。

ここで疑問が湧きます。

vueとflaskを同時にプロキシすると、どのように試してもフロントエンドはflaskのアドレスにアクセスできません

解決:

​ 2つの異なるドメイン名がそれぞれvueとflaskのプロキシに使用され、vueはflaskのプロキシドメイン名を指します。

ユーザー nginx;
ワーカープロセス 1;

error_log ログ/error.log;
#error_log ログ/error.log 通知;
#error_log ログ/error.log 情報;

pid ログ/nginx.pid;


イベント {
    ワーカー接続xx;
    epoll を使用します。
}


http {
    mime.types を含めます。
    デフォルトタイプ アプリケーション/オクテットストリーム;

    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log ログ/access.log メイン;
    server_tokens オフ;
    ファイル送信オン;
    #tcp_nopush オン;

    #キープアライブタイムアウト 0;
    キープアライブタイムアウトxx;

    #gzip オン;
        サーバー{
                xxを聴く;
                サーバー名 hqfund.com www.hqfund.com;
                301 https://$host$request_uri を返します。
  }
 
 サーバー{
  443 ssl を聴く;
  サーバー名 xxx.com1;
         ssl_certificate /xxxx;
         ssl_certificate_key /xxxx;


  
  位置 / {
              ルート /xxxx;
   インデックス index.html index.htm;
  }
 }

    サーバー{
                xxを聴く;
                サーバー名 xxx.com2;
                301 https://$host$request_uri を返します。
  }
  
 サーバー{
  xxx ssl を聞きます。
  サーバー名 xxx.com2;
  ssl_certificate /xxxx;
         ssl_certificate_key /xxxx;
  
  位置 / {
              uwsgi_params を含めます。
   uwsgi_passxxxx:xx;
   プロキシ_http_バージョン 1.1;
   proxy_set_header アップグレード $http_upgrade;
   proxy_set_header 接続「アップグレード」;
  }
 }
}

これで、Flask と Vue のフロントエンドとバックエンドの分離プロジェクト展開のサンプルコードに関するこの記事は終了です。Flask と Vue のフロントエンドとバックエンドの分離の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • uWSGI と Nginx を使用して Flask プロジェクトをデプロイする方法の例
  • Flask フレームワーク構成依存パッケージ情報に基づく Python プロジェクトの移行と展開
  • CentOS に Flask プロジェクトをデプロイする方法
  • Flaskプロジェクトの展開の実装手順

<<:  ウェブページのFOUC問題によるウェブページの混乱の解決策

>>:  HTMLとCSSを使用して、自分だけの暖かい男「Dabai」を作成します

推薦する

MySQL データ操作 - DML ステートメントの使用

例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...

MySQL マルチテーブルクエリの詳細な説明

いつも、気づかないうちに時間というのは驚くほど早く過ぎていきます。小暑が過ぎ、中暑に突入しました。太...

Linux システムで httpd の自動インストールと構成を Ansible で実装する方法

1. Ansibleのプレイブックを使用してhttpdを自動的にインストールする1) まず、Ansi...

コネクタコンポーネントから Tomcat のスレッドモデルを見る - BIO モード (推奨)

Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...

CSS でショートカット プロパティを記述する際は、トラブルの順序に注意してください (落とし穴を避けるため)

ショートハンドプロパティは、複数のプロパティに同時に値を割り当てるために使用されます。たとえば、fo...

$remote_addr に基づく nginx フロントエンド配布方法の詳細な説明

要件は次のとおりです。ドメイン名の下に複数のサーバーがあります。現在、特定の地域をテストしています。...

CSS3でカルーセル画像を作成する方法

スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...

MySQL で 1 つのテーブルのフィールドを使用して別のテーブルのフィールドを更新する方法

1. 1列を変更する 学生の更新、都市c s.city_name = c.name を設定します こ...

Windows 10 システムで nginx ファイル サーバーを構成するためのグラフィック チュートリアル

Nginx の公式 Web サイトから Windows バージョンの Nginx をダウンロードしま...

Docker x509 の安全でないレジストリ問題を解決する

Docker をインストールした後、会社が構築したプライベート サーバー Harbor からプルしよ...

Nginx+Tomcat 負荷分散クラスタのインストールと構成のケースの詳細な説明

目次序文1. Nginx+Tomcat 2. Nginxサーバーを構成する3. Tomcatアプリケ...

JS でシングルトン モードを実装するための 6 つのソリューションの概要

序文今日は、デザインパターンのクリエーションパターンを見直していたところ、JS でシングルトンパター...

JS に依存せずにレスポンシブ レイアウトを実現する CSS3 モバイル vw+rem メソッド

1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...

2つのボールが交差する粘着効果を実現するCSSサンプルコード

これは純粋に CSS のみを使用して作成されたエフェクトです。簡単に言うと、このエフェクトは画像処理...

jconsole を使用してリモート Tomcat サービスを監視する方法

JConsoleとはJConsole は Java 5 で導入されました。 JConsole は、コ...