GRIDY

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

 

Pass options to the builtin svgo from svgr/webpack

Is there an option to pass in svgo options to the svgr/webpack loader ? I want to remove the width & height attributes and keep the viewbox, by default it removes those. { test: /\.svg$/, ...

stackoverflow.com

 

 

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

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

'React' 카테고리의 다른 글

리액트에서 디버깅을 해보자  (0) 2023.11.26

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

 

Docker로 NextJS 앱 배포하기

docker build 시 Image size가 GB 단위로 올라가고, m1 맥북에서 build 시 ubuntu에서 호환이 안되기 때문에 추가 옵션을 줘야하는 등 약간의 이슈가 있어서 git 코드 공유로 ubuntu server 자체에서 build하는 식

bedevelopers.tistory.com

 

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

 

Next.js 프로젝트 docker 배포 + 이미지 크기 줄이기

이번에 Docker를 이용하여 전체 프로젝트의 배포 설정을 구현하기로 결정했다.현재 프로젝트의 구성은 server / client 두 개의 레포로 나뉘어져 있어서, 각각 Dockerfile을 구성하기로 했다.Docker로 배포

velog.io

 

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

 

🚢 Next.js 도커 이미지 크기 줄이기

다음은 next.js 공식 코드베이스에 공개되어 있는 Dockerfile 이다. dependency 설치, 빌드, 실행 스테이지로 나누고 node:alpine를 베이스 이미지로 사용한 모범적인 모습이다. 하지만 조금이라도 컨테이너

taeho.io

 

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

 

[Docker] Docker - Spring Boot로 EC2 배포하기

Docker - Spring Boot로 EC2 배포하기 ○ 목표 - Spring Boot (server) Docker Image로 Build - Docker Hub에 Docker Image 공유(push) - EC2 Docker Image pull 및 설치 -> 한마디로 Spring Boot를 Docker를 이용하여 EC2에 간편하게 배포

lucas-owner.tistory.com

 

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

 

스프링부트를 도커로 EC2에 배포하기 (SpringBoot, Docker, EC2)

SpringBoot + Docker + EC…

devfoxstar.github.io

 

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

 

Nginx로 https 적용하기 (let's encrypt 사용)

- Ubuntu 18.04 LTS 에서 진행 - Ubuntu 20.04 에서 실행 시에도 문제 없었음. - 보유 DNS가 있어야 진행할 수 있음. greenlock 방식이 불안하다는 얘기가 많아서 리버스 프록시 방식의 Nginx를 사용하여 https 인

nuggy875.tistory.com

 

https://nuggy875.tistory.com/133

 

https 인증서 자동 갱신 (Let's Encrypt) (Crontab사용)

https 인증서 발급 및 수동 갱신 방법 https://nuggy875.tistory.com/119 Nginx로 https 적용하기 (let's encrypt 사용) - Ubuntu 18.04 LTS 에서 진행 - Ubuntu 20.04 에서 실행 시에도 문제 없었음. - 보유 DNS가 있어야 진행

nuggy875.tistory.com

 

https://freedeveloper.tistory.com/264

 

[Docker] Crontab 설치

https://codeday.me/ko/qa/20190325/152387.html Cron Job * * * * * root echo "Hello world" >> /var/log/cron.log 2>&1 Dockerfile FROM ubuntu:latest MAINTAINER docker@ekito.fr RUN apt-get update && apt-get -y install cron # Add crontab file in the cron directo

freedeveloper.tistory.com

 

'Ubuntu' 카테고리의 다른 글

Ubuntu 22.04 LTS에 MongoDB 설치하기  (0) 2023.11.26

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

 

How do I assign a port mapping to an existing Docker container?

I'm not sure if I've misunderstood something here, but it seems like it's only possible to set port mappings by creating a new container from an image. Is there a way to assign a port mapping to an

stackoverflow.com

 

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

 

Overlay network driver

All about using overlay networks

docs.docker.com

 

'Docker' 카테고리의 다른 글

Next.js Dockerfile 메모  (1) 2023.12.30
Springboot Docker 배포하기  (0) 2023.12.30
Ubuntu 20.04 Docker 설치하고 사용하기  (0) 2023.12.29

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/

 

Install Docker Engine on Ubuntu

Jumpstart your client-side server applications with Docker Engine on Ubuntu. This guide details prerequisites and multiple methods to install Docker Engine on Ubuntu.

docs.docker.com

 

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

 

Docker에서 Ubuntu 20.04 사용하기

사실 작업환경 자체도 Ubuntu 20.04다. 다만, Docker에 이 컨테이너를 만드는 건 내 작업환경과는 별개의 테스트 환경을 구축하기 위함이다.

velog.io

 

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

 

docker 설치 후 /var/run/docker.sock의 permission denied 발생하는 경우 · Issue #116 · occidere/TIL

docker 설치 후 /var/run/docker.sock의 permission denied 발생하는 경우 상황 docker 설치 후 usermod로 사용자를 docker 그룹에 추가까지 완료 후 터미널 재접속까지 했으나 permission denied 발생 (설치 참고: https://b

github.com

 

'Docker' 카테고리의 다른 글

Next.js Dockerfile 메모  (1) 2023.12.30
Springboot Docker 배포하기  (0) 2023.12.30
Docker 컨테이너 생성 이후 포트 포워딩 하기  (0) 2023.12.29

+ Recent posts