GRIDY

Web Frontend Developer

Next.js @svgr/webpack 사용시 스타일로 svg 크기 조절 안되는 현상

@svgr/webpack 설치 후 svg 크기를 스타일로 조절하려고 했는데 안되는 증상이 있었다.

코드를 살펴보니 기존 svg 태그에서 viewBox 속성이 사라지는 것을 확인했다.

https://stackoverflow.com/questions/64376001/pass-options-to-the-builtin-svgo-from-svgr-webpack/70360615#70360615

웹팩 설정을 아래와 같이 고치면 해결할 수 있다.

{
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false
                },
              },
            },
          ]
        }
      }
    },
  ],
}

Dockerfile 메모

FROM node:20.10.0-alpine AS base

WORKDIR /usr/src/app

COPY ./ ./

RUN yarn build

EXPOSE 3000

CMD ["node", "server.js"]

참고링크

https://bedevelopers.tistory.com/266

https://velog.io/@jadenkim5179/Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-docker-%EB%B0%B0%ED%8F%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%81%AC%EA%B8%B0-%EC%A4%84%EC%9D%B4%EA%B8%B0

https://taeho.io/pages/8013f2c9-2602-48a9-abf4-053c9ea1dbb2

Springboot Docker 배포하기

작업환경

IDE: IntelliJ IDEA CE

Framework: Springboot

Build: Gradle

OpenJDK17

참고 링크 윗 링크에서는 Maven에서의 Docker 적용 방법도 있으니 참고!

Springboot 루트 폴더에 Dockerfile 생성 후 입력

# Docker File

# JDK IMAGE
FROM openjdk:17-jdk
# JAR
ARG JAR_FILE=build/libs/*.jar
# JAR FILE COPY
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java", "-jar", "app.jar"]

build.grale에 아래 내용 추가

jar {
	enabled = false
}

빌드 실행

$ ./gradlew clean build -x test

도커 허브 로그인

$ docker login

도커 빌드

$ docker build -t <도커 허브 아이디>/<만들 이미지명> .
# ex ) docker build -t psb/gridy-image .

만들어진 이미지명 확인

$ docker images

도커 이미지 도커 허브에 푸시

$ docker push <도커 허브 아이디>/<이미지 명>

사용할 서버에서 도커 이미지 가져오기

$ docker pull <도커 허브 아이디>/<이미지 명>

도커 이미지로 컨테이너 생성 및 실행

$ docker run -d -p 8080:8080 --name <만들컨테이너명> <도커 허브 아이디>/<이미지 명>
# 8080:8080에는 포트를 넣습니다

참고링크

https://lucas-owner.tistory.com/48

https://devfoxstar.github.io/java/springboot-docker-ec2-deploy/

Nginx Let's Encrypt SSL 적용하기

실행 환경

- Ubuntu 20.04 / Docker: Ubuntu 20.04 이미지 적용

- nginx에는 이미 http로 도메인 연결이 되어 있다고 가정한다.

CERTBOT 적용하여 Let's Encrypt SSL 적용하기

# 설치
$ apt-get install letsencrypt
$ apt-get install python3-certbot-nginx
$ apt-get install certbot

# SSL 인증서 등록
$ certbot --nginx
or
$ certbot --nginx -d [적용할 사이트 이름]

$ service nginx restart
or
$ systemctl restart nginx

# 3개월에 한번씩 갱신 필요
# 테스트 갱신
$ certbot renew --dry-run
# 실제 갱신
$ certbot renew

Crontab을 사용하여 자동 갱신

# Docker일 경우 crontab 설치 필요
$ apt-get install cron

# Crontab 편집
$ crontab -e

(매월 1일 오전 5시에 실행) - 자세한건 참고링크에서 확인해주세요!
0 5 1 * * /usr/bin/certbot renew --renew-hook="service nginx restart"

# Crontab 보기
$ crontab -l

참고링크

https://nuggy875.tistory.com/119

https://nuggy875.tistory.com/133

https://freedeveloper.tistory.com/264

Docker 컨테이너 생성 이후 포트 포워딩 하기

Docker에서는 포트포워딩을 하려면 docker 컨테이너를 생성하는 시점에서 해야한다.

하지만 이미 생성해버렸다면 docker 이미지를 생성한 뒤 그걸로 새 컨테이너를 만드는 방법으로 포트 포워딩을 할 수 있다.

이미지를 생성한 뒤 새로 컨테이너를 만드는 방법은 상태에 따라 데이터가 손실될 수도 있다고 한다.

다른 방법도 있는데 아래 StackOverflow 링크에서 확인할 수 있다.

# 컨테이너 종료
$ docker stop <컨테이너명>

# 도커 이미지 생성
$ docker commit <컨테이너명> <생성할 이미지명>

# 컨테이너 삭제
$ docker rm <컨테이너명>

# 컨테이너 80번 포트 포트포워딩 상태로 생성 및 실행
$ docker run -it -p 80:80 --name <컨테이너명> <생성한 이미지명> /bin/bash

참고링크

https://stackoverflow.com/questions/19335444/how-do-i-assign-a-port-mapping-to-an-existing-docker-container/26622041#26622041

https://docs.docker.com/network/drivers/overlay/#publish-ports

Ubuntu 20.04 Docker 설치 및 사용하기

APT 소스 추가

# Add Docker's official GPG key:
$ sudo apt-get update
$ sudo apt-get install ca-certificates curl gnupg
$ sudo install -m 0755 -d /etc/apt/keyrings
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
$ sudo chmod a+r /etc/apt/keyrings/docker.gpg

# Add the repository to Apt sources:
$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get update

Docker 설치

$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

확인

$ sudo docker run hello-world

Docker 일반 유저 권한 주기

$ usermod -aG docker $USER
or
$ sudo usermod -aG docker <유저명>

권한 적용을 위한 Docker 재시작

$ service docker restart

Docker Ubuntu 20.04 이미지 다운로드

$ docker pull ubuntu:20.04

[ 위 명령어에서 권한에러 발생시 ] 

• /var/run/docker.sock 파일의 권한을 666으로 변경하여 그룹 내 다른 사용자도 접근 가능하게 변경

$ sudo chmod 666 /var/run/docker.sock

• 또는 chown 으로 group ownership 변경

$ sudo chown root:docker /var/run/docker.sock

Docker 명령어 체크

$ docker run --help

Docker 생성 및 실행 (명령어 체크하여 옵션 적절하게 분배하기)

$ docker run -it --name <컨테이너명> ubuntu:20.04 /bin/bash

실행중인 컨테이너 확인

$ docker ps
or
$ docker ps -a # 종료된 컨테이너까지 확인

컨테이너 시작 및 컨테이너 종료

$ docker start <컨테이너명>
$ docker stop <컨테이너명>

컨테이너 접속

$ docker exec -it <컨테이너명> /bin/bash

컨테이너 최초 접속 이후 apt update 실행

$ apt update

https://docs.docker.com/engine/install/ubuntu/

https://velog.io/@peeeeeter_j/Docker%EC%97%90%EC%84%9C-Ubuntu-20.04-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

https://github.com/occidere/TIL/issues/116