[Bug] Mixed Content 에러(https 보안 문제)

[codeisneverodd]

🐛 현재 상황

• HTTP 접근 에러: 배포된 앱(HTTPS)에서 타까마까 서버(HTTP)로 값 요청시, HTTPS에서 HTTP의 값을 사용하므로 보안상 blocking 되어있음

📃 세부 사항

• HTTPS에서 HTTP의 콘텐츠를 불러올 수 있도록 Meta 태그 추가
• -> 위의 방법은 HTTP 요청을 HTTPS 태그로 변환해서 요청하는 방식으로, 요청이 프로토콜이 달라져서 서버에서 응답하지 못함
• 서버를 HTTPS로 변경하거나, 배포 어플을 Netlify가 아닌 다른 플랫폼을 이용하여 HTTP로 낮추어야함

✏️ 할 일

• [x] meta 태그 추가

🙏 추가 설명

[codeisneverodd]

💀 EC2 + HTTPS 배포 💀

🦴 이곳에 뼈를 묻겠습니다…

1. AWS EC2 - LINUX

1. 인스턴스 생성

1. 인스턴스 시작 - 기본 정보 입력
2. Linux 선택 - 프리티어에서 사용 가능 한 것 중 가장 작은 옵션 선택
3. 키 페어 생성 - RSA, PEM
4. 네트워크 설정 - 보안 그룹 생성, SSH, HTTPS, HTTP 허용
5. 스토리지 구성 - 기본 값

2. NodeJS 설치 및 서버 구동

[자습서: Amazon EC2 인스턴스에서 Node.js 설정](https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html)

1. 상세정보에서 연결로 진입 - SSH 클라이언트 항목 따라감
2. SSH 명령어로 연결 확인

3. NodeJS 설정 - 아래 공식 가이드 참고

   1. 보안 그룹이 SSH(포트 22), HTTP(포트 80), HTTPS(포트 443) 연결을 허용하도록 구성되어야 합니다. - [아마존 Amazon EC2 EC2로 설정](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/get-set-up-for-amazon-ec2.html)

      [보안 그룹](https://www.notion.so/d73604e81db345a489739f3297d9a2ae)

   2. 프로시저 가이드에 따라 설치 - nvm

      • 바로 설정 안됨. -

        [Node 설치 트러블 슈팅](https://www.notion.so/Node-c0fcffced1ea422f9b60b4d6c8113d56)

3. Private 레퍼지토리 클론

[Connecting to GitHub with SSH - GitHub Docs](https://docs.github.com/en/authentication/connecting-to-github-with-ssh)

[Testing your SSH connection - GitHub Docs](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/testing-your-ssh-connection)

1. Linux 버전 예시로 변경
2. SSH Public Key 생성
3. GitHub에서 SSH 설정
4. SSH 연결확인(콘솔에서 닉네임 뜨는지)
   1. Hi codeisneverodd! You've successfully authenticated, but GitHub does not provide shell access.
5. Git 설치
   1. https://cloudaffaire.com/how-to-install-git-in-aws-ec2-instance/ 문서 따름
   2. yum(npm과 같은 패키지 관리자) 업데이트
6. Git clone 수행 - 성공
   1. 프로젝트 폴더 이동 후 npm install
   2. node 16버전으로 깔 수 없는 패키지 존재, node 18 이상 필요
   3. https://stackoverflow.com/questions/72022527/glibc-2-27-not-found-while-installing-node-on-amazon-ec2-instance

⇒ Amazon Linux에선 node 18 버전을 지원하지 않음. Ubuntu로 변경 결정

→ 위와 같은 과정 Ubuntu로 반복

→ 정상적으로 패키지 설치됨

4. 서버 구동

1. 인스턴스에 지정된 보안그룹에, 열고 싶은 포트 번호를 인바운드 규칙에 추가
2. 서버 구동후, 주소:포트 로 접속 가능한지 확인(http만가능) → 확인 완료

5. Route 53 도메인으로 인스턴스 연결

[Amazon EC2 인스턴스로 트래픽 라우팅](https://docs.aws.amazon.com/ko_kr/Route53/latest/DeveloperGuide/routing-to-ec2-instance.html)

1. 위의 가이드에 따라 설정 → 구매한 API:포트넘버 로 접속 가능 확인

6. Nginx를 통한 포트 넘버 및 HTTPS 설정

1. nginx 설치 - 포트 포워딩

sudo apt-get install nginx

1. letsencrypt 설치 - 무료 SSL

   [[Nginx]SSL 인증 - Let's Encrypt(http to https)](https://hun-dev.tistory.com/24)

2. nginx 설정을 아래와 같이 수정

sudo vim /etc/nginx/sites-available/default

• 코드

  # Default server configuration
  #
  server {
          listen 80 default_server;
          listen [::]:80 default_server;
  
          # SSL configuration
          #
           listen 443 ssl default_server;
            listen [::]:443 ssl default_server;
  
           ssl_certificate /etc/letsencrypt/live/api-takkamakka.link/fullchain.pem;
           ssl_certificate_key /etc/letsencrypt/live/api-takkamakka.link/privkey.pem;
           ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
           ssl_ciphers HIGH:!aNULL:!MD5;
  
          # Note: You should disable gzip for SSL traffic.
          # See: https://bugs.debian.org/773332
          #
          # Read up on ssl_ciphers to ensure a secure configuration.
          # See: https://bugs.debian.org/765782
          #
          # Self signed certs generated by the ssl-cert package
          # Don't use them in a production server!
          #
          # include snippets/snakeoil.conf;
  
          root /var/www/html;
  
          # Add index.php to the list if you are using PHP
          index index.html index.htm index.nginx-debian.html;
  
          server_name _;
  
          location / {
                  # First attempt to serve request as file, then
                  # as directory, then fall back to displaying a 404.
                  proxy_pass http://127.0.0.1:3000$request_uri;
          }
  
          # pass PHP scripts to FastCGI server
          #
          #location ~ \.php$ {
          #       include snippets/fastcgi-php.conf;
          #
          #       # With php-fpm (or other unix sockets):
          #       fastcgi_pass unix:/run/php/php7.4-fpm.sock;
          #       # With php-cgi (or other tcp sockets):
          #       fastcgi_pass 127.0.0.1:9000;
          #}
  
          # deny access to .htaccess files, if Apache's document root
          # concurs with nginx's one
          #
          #location ~ /\.ht {
          #       deny all;
          #}
  }
  
  # Virtual Host configuration for example.com
  #
  # You can move that to a different file under sites-available/ and symlink that
  # to sites-enabled/ to enable it.
  #
  #server {
  #       listen 80;
  #       listen [::]:80;
  #
  #       server_name example.com;
  #
  #       root /var/www/example.com;
  #       index index.html;
  #
  #       location / {
  #               try_files $uri $uri/ =404;
  #       }
  #}
  server {
          listen 80;
          server_name api-takkamakka.link;
          root html;
  
          location / {
            return 301 https://api-takkamkka.link$request_uri;
          }
  
  }

1. 트러블 슈팅
   1. redirect가 제대로 되지 않는 문제 ⇒ proxy 설정하고, 404 제거