By Adnan Kaya
I have a frontend, multiple backend api apps on digital ocean app platform. I deployed them successfully. On the frontend app I use nginx to serve my vue app and define proxy to my backend api apps. When I try to make request from frontend to backend I got error about SSL
[myfrontend-app] [2023-01-23 17:55:44] 2023/01/23 17:55:44 [error] 20#20: *9 SSL_do_handshake() failed (SSL: error:1408F10B:SSL routines:ssl3_get_record:wrong version number) while SSL handshaking to upstream, client: 10.33.44.55, server: , request: "POST /api/v1/auth/tokens/ HTTP/1.1", upstream: "https://104.11.211.77:80/api/v1/auth/tokens/", host: "myfrontend-app-abcdef.ondigitalocean.app", referrer: "https://myfrontend-app-abcdef.ondigitalocean.app/login"
Here is my nginx conf
upstream be-app-1 {
server be-app-1-abc.ondigitalocean.app;
}
upstream be-app-2 {
server be-app-2-def.ondigitalocean.app;
}
upstream be-app-3 {
server be-app-3-ghi.ondigitalocean.app;
}
server {
listen 80;
listen [::]:80;
# The root directory of the Vue.js application
root /usr/share/nginx/html;
# Serve the index.html file for all requests
index index.html;
# Serve the Vue.js application's static files
location / {
try_files $uri $uri/ /index.html;
}
location ~ ^/api/v1/auth/(.*) {
proxy_pass https://be-app-1/api/v1/auth/$1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
proxy_ssl_server_name on;
}
location ~ ^/api/v1/pro/(.*) {
# using $1 in the target. Example; offenders/ AND $is_args$arg are for Http query params
proxy_pass https://be-app-2/api/v1/pro/$1$is_args$args;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
}
location ~ ^/api/v1/vro/(.*) {
proxy_pass https://be-app-3/api/v1/vro/$1$is_args$args;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
}
}
Any help would be great!
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Hello @adnankaya
From first look I can see that the connection occurs on port 80 which is usually used by HTTP and not HTTPS, making https connections on port 80 are likely to cause issues like this.
You can try switching to port 443 and give it another go. This should resolve the issue, but if not share any error messages that you can collect.
Regards
Hey @adnankaya,
You need to create a 443 block in your Nginx configuration file and configure SSL with it as well. The error you mentioned is exactly that. You try to send an encrypted request via port 80 which is not possible. You can use let’s encrypt to install an SSL and create the Nginx config with the listen 443; listen [::]:443; directives.
Finally I found the solution. You can check out my github repo : https://github.com/adnankaya/FullStack_MicroService_Digital_Ocean_App_Platform
Here is the nginx conf
server {
listen 80;
listen [::]:80;
# set DNS resolver as Docker internal DNS
# resolver 127.0.0.11 valid=10s;
# resolver_timeout 5s;
# The root directory of the Vue.js application
root /usr/share/nginx/html;
# Serve the index.html file for all requests
index index.html;
# Serve the Vue.js application's static files
location / {
try_files $uri $uri/ /index.html;
}
location /app1/ {
set $app1 http://api1:5000;
proxy_pass $app1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /app2/ {
set $app2 http://api2:5001;
proxy_pass $app2;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Here is my App Spec file
alerts:
- rule: DEPLOYMENT_FAILED
- rule: DOMAIN_FAILED
envs:
- key: REDIS_HOST
scope: RUN_AND_BUILD_TIME
value: redis-abc.db.ondigitalocean.com
- key: REDIS_PORT
scope: RUN_AND_BUILD_TIME
value: "25061"
- key: REDIS_USERNAME
scope: RUN_AND_BUILD_TIME
value: default
- key: REDIS_PASSWORD
scope: RUN_AND_BUILD_TIME
value: yourPASSWORD
name: fsms-app
region: fra
services:
- dockerfile_path: /frontend/Dockerfile
github:
branch: master
repo: adnankaya/FullStack_MicroService_Digital_Ocean_App_Platform
http_port: 80
instance_count: 1
instance_size_slug: basic-xxs
name: fe
routes:
- path: /
source_dir: frontend
- dockerfile_path: /service-app1/Dockerfile
github:
branch: master
repo: adnankaya/FullStack_MicroService_Digital_Ocean_App_Platform
http_port: 5000
instance_count: 1
instance_size_slug: basic-xxs
name: api1
routes:
- path: /app1
source_dir: service-app1
- dockerfile_path: service-app2/Dockerfile
github:
branch: master
repo: adnankaya/FullStack_MicroService_Digital_Ocean_App_Platform
http_port: 5001
instance_count: 1
instance_size_slug: basic-xxs
name: api2
routes:
- path: /app2
source_dir: service-app2
workers:
- dockerfile_path: /worker-celery/Dockerfile
github:
branch: master
repo: adnankaya/FullStack_MicroService_Digital_Ocean_App_Platform
instance_count: 1
instance_size_slug: basic-xxs
name: celery
source_dir: .
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.