deploying custom maintenance pages in arabic shows question marks live

omar-dulaimi commented 3 years ago

Description

I have defined custom maintenance pages for 40x and 50x errors. Currently the html for both has arabic text. Locally through vsCode, I can see the text correctly. Also pasting the html code to the browser does display everything just fine. Except when deploying live, all arabic characters get turned into question marks.

Steps to reproduce

files:
  "/usr/share/nginx/html/40x.html" :
    mode: "000755"
    owner: nginx
    group: nginx
    content: |
        <!DOCTYPE html>
        <html>
                <head>
                        <title>الموقع في حالة صيانة</title>
                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1" />

                        <style type="text/css">
                            body { text-align: center; padding: 10%; font: 20px Helvetica, sans-serif; color: #333; }
                            h1 { font-size: 50px; margin: 0; }
                            article { display: block; text-align: right; max-width: 650px; margin: 0 auto; }
                            a { color: #dc8100; text-decoration: none; }
                            a:hover { color: #333; text-decoration: none; }
                            @media only screen and (max-width : 480px) {
                                    h1 { font-size: 40px; }
                            }
                        </style>
                </head>
                <body>
                     <article dir="rtl">
                        <h1>لم نتمكن من العثور على تلك الصفحة.</h1>
                        <p>الصفحة التي تبحث عنها بعيدة عن متناولنا</p>
                      </article>
                </body>
        </html>

Observed result

deployment works fine. But the produced html files are faulty.

Expected result

I should see the same text I see on vsCode, but live.

Additional environment details (Ex: Windows, Mac, Amazon Linux etc)

OS: Ubuntu 18.04
EBCLI version: 3.19.4 (Python 3.6.9)

Mickeypeng commented 3 years ago

Hi @omar-dulaimi thanks for reaching out. Unfortunately I can’t reproduce this bug. I wrote a simple flask application and used the html you provide as a static file. I deployed it to EB and it works well. And you can see this link http://flask-env.eba-cgzckkmb.us-west-2.elasticbeanstalk.com/static/404.html It seems the character is correctly displayed.

Based on the information you provide, I couldn’t determine whether error happens in S3 bucket upload( if you don’t use git), or error happens in S3 download to instance, or instance itself doesn’t have the charset. Could you ssh into the instance, copy the 40x.html on the instance and see if it’s any difference compare to original html file?

omar-dulaimi commented 3 years ago

Hello @Mickeypeng Our error pages aren't separate static files ready to deploy .They're defined in .ebextensions directory, as one of the files ending in .config That .config file had all the code necessary to generate the pages. (above code)

NihalM99 commented 12 months ago

Hi @omar-dulaimi , @Mickeypeng's suggestion is working for me and i am able to see the characters displayed properly , could you please provide more info / steps to reproduce .

aws / aws-elastic-beanstalk-cli