実現したいこと
VPSサーバーを借りて、Ubuntu,Apacheをインストールして、sshで繋ぎ、
Queryアプリで、Flaskと連携したものを https://test.com/test/front/ で公開しようとしています。
###ファイル構成
testフォルダ
flaskフォルダ
app.py
frontフォルダ
index.html(Vue.jsをCDNで読み込んでいる)
test.js(jQuery)
このjQueryアプリはjQueryを使って、Flaskと連携させたいです。
で実行すると、sshでつないだターミナルには以下のように2つのアドレスが表示されます。
これも https://test.com/test/flask/ をブラウザで見ることはできます。
発生している問題・分からないこと
sshで繋いだターミナル上では、jQueryアプリの方のボタンをクリックしたら、Flaskのエンドポイントに指示が入るはずで、CORSの設定もしてみたが、何も反応がみられません。
発生している問題・分からないこと
ローカルで動かしていた時は、ちゃんと動いていたが、
VPSサーバに置いてから、多分全く通信できていません
エラーメッセージ
error
1jquery-3.6.0.min.js:2 2 3 POST https://test.com:5400/test/flask/test-action net::ERR_CONNECTION_TIMED_OUT
該当のソースコード
Apache
12<VirtualHost *:80> 3 ServerName test.com 4 ServerAlias www.test.com 5 Redirect permanent / https://test.com/ 6</VirtualHost> 7 8<VirtualHost *:443> 9 ServerName test.com 10 ServerAlias www.test.com 11 12 DocumentRoot /var/www/html/test/vue_front/ 13 14 SSLEngine on 15 SSLCertificateFile /etc/letsencrypt/live/test.com/fullchain.pem 16 SSLCertificateKeyFile /etc/letsencrypt/live/test.com/privkey.pem 17 SSLCertificateChainFile /etc/letsencrypt/live/test.com/chain.pem 18 19 # Log files 20 ErrorLog ${APACHE_LOG_DIR}/error.log 21 CustomLog ${APACHE_LOG_DIR}/access.log combined 22 23 # ProxyPass configuration for jquery application 24 ProxyPass /test/front/ http://localhost:8000/ 25 ProxyPassReverse /test/front/ http://localhost:8000/ 26 27 # ProxyPass configuration for Flask application 28 ProxyPass /test/flask/ http://localhost:5400/ 29 ProxyPassReverse /test/flask/ http://localhost:5400/ 30 31 # Additional proxy settings if needed 32 ProxyPreserveHost On 33 34 <Proxy *> 35 Order deny,allow 36 Allow from all 37 </Proxy> 38 39 <Location /> 40 Order allow,deny 41 Allow from all 42 </Location> 43 44 <Directory /var/www/html/test/front/> 45 Options Indexes FollowSymLinks 46 AllowOverride All 47 Require all granted 48 </Directory> 49</VirtualHost>
Flask(https://test.com/test/flask/)
1``` app.py(flask) のCORS部分 2CORS(app, origins='https://test.com/test/front/') 3... 4 5# Flaskエンドポイントの設定 6@app.route('/test-action', methods=['POST']) 7def handle_test_action():
```jQuery(https://test.com/test/front/ ) $(function() { var isBtnClicked = false; $('#btn').click(function(event) { event.preventDefault(); var name01 = $('#name01').text(); $.ajax({ url: 'https://test.com:5400/test/flask/test-action', type: 'POST', contentType: 'application/json', data: JSON.stringify({ 'name01': name01 }), success: function(response) { $('#name01').html(name); }, error: function(error) { console.log(error); } }); }); });
試したこと・調べたこと
上記の詳細・結果
ApacheとFlaskとjQueryの上記の部分を色々変更しましたが、さっぱり動かずわからない状態が続いています。アドバイスをいただけたら幸いです。
補足
特になし

0 コメント