html + css + docker + alpine nginx + Let's encrypt로 포트폴리오 만들기

추가



https-portal에서 포트폴리오를 만들었습니다.
아래의 작업은 모두 불필요하게 되었습니다.

만든 배경



나도 슬슬 취활생이기 때문에, 인턴에 필요한 포트폴리오를 작성하지 않으면.
그래서 모처럼이라면 1부터 해보고 싶다 (라고 말하면서 HTML과 CSS는 템플릿을 사용했지만)
그래서 표제의 언어와 도구를 사용하여 구현해 보았습니다.

환경


  • CentOS (여기는 OS가 될 수 있음)
  • Docker (version 18.X)
  • docker-compose (version 1.18.0)

  • HTML + CSS 정보



    엔지니어로 포트폴리오를 만들었습니다.
    이 기사를 참고로 포트폴리오를 만들었습니다.
    기본적인 HTML과 CSS이므로 내용 설명은 생략합니다.

    디렉토리 구조 정보



    나무
    .
    ├── docker-compose.yaml
    ├── portfolio
    │   ├── css
    │   ├── img
    │   ├── index.html
    │   └── js
    └── web
        └── default.conf
    

    portfolio 내에 작성한 HTML, CSS 여러분을 넣어 둡니다.

    nginx



    최소한의 설명만 실시하고 있습니다.
    이것이 있으면 SSL 통신까지 할 수 있습니다.
    example.com을 내 도메인으로 다시 작성하세요.

    default.conf
    server {
      listen 80;
      server_name example.com;
      return 301 https://$host$request_uri;
    }
    
    server {
      listen 443 ssl;
    
      ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;
      ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
      server_name example.com;
    
      root  /var/www/html;
      index index.html;
    
      access_log /var/log/nginx/access.log;
      error_log  /var/log/nginx/error.log;
    }
    

    도커



    docker-compose.yaml
    version: '3'
    services:
      web:
        image: nginx:1.13.5-alpine
        ports:
          - "80:80"
          - "443:443"
        volumes:
          - ./web/default.conf:/etc/nginx/conf.d/default.conf
          - ./portfolio:/var/www/html
    

    docker-compose의 기술 내용을 모르는 분은 많이 알기 쉬운 기사가 ​​있으므로 구구하십시오.

    docker 컨테이너에 exec 명령으로 들어갑니다.
    (shell이 ​​ash인데 처음 당황했습니다 ...)
    (진짜는 Dockerfile에 전부 기술해 하고 싶으니까 앞으로 고쳐드립니다.)
    $ apk update && apk add certbot
    $ certbot certonly --webroot -w /var/www/html/ -d example.com -m [email protected]
    $ echo '0 0 * * 3 certbot renew' > /var/spool/cron/crontabs/root && crond -l 2 -f
    

    나머지는 example.com을 방문하여 SSL 통신이 가능한지 확인하십시오.


    수고하셨습니다.
    (꼭 여기에 강한 분은 교수 부탁드립니다)

    좋은 웹페이지 즐겨찾기