.net core 기반 React 프로젝트를 Docker로 빌드 후 배포를 해보려고 합니다.

기본으로 제공되어있는 Dockfile로는 빌드가 진행되지 않고 실패가 떨어지게 될 것 입니다.

 

RUN apt-get updateRUN apt-get install -y curlRUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glxRUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -RUN apt-get install -y nodejs

React는 node.js 위에서 동작을 하고 npm으로 설치되어있는 여러가지 라이브러리가 필요하기 때문인데요.

 

ASP.NET Core 및 React.js를 포함한 Visual Studio 컨테이너 도구 | Microsoft Learn를 참고하여 DockerFile를 수정해보겠습니다.

 

1. 추가해야 될 명령어

RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

2. 완성된 DockerFile

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["ProjectSPA1/ProjectSPA1.csproj", "ProjectSPA1/"]
RUN dotnet restore "ProjectSPA1/ProjectSPA1.csproj"
COPY . .
WORKDIR "/src/ProjectSPA1"
RUN dotnet build "ProjectSPA1.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "ProjectSPA1.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "ProjectSPA1.dll"]

'Server > Docker' 카테고리의 다른 글

[Ubuntu] Docker 설치하기  (0) 2023.10.23
[Centos] aws linux centos에 docker로 jenkins 띄우기  (0) 2023.08.08
Docker 명령어  (0) 2023.01.29
Docker 설치 - linux편  (0) 2023.01.29
Docker 설치 - windows편  (0) 2023.01.29

AWS 기능중에 AWS Global Accelerator를 알아보려고 합니다.

AWS Global Accelerator는 클라이언트에 가장 가까운 정상 동작하는 엔드포인트를 찾아 연결을 도와줍니다.

 

한마디로 여러 리전에 있는 서버중 현재 사용자에 가장 가까우면서 정상 동작을 하는 서버에 연결을 도와줍니다.

가장 가까운 서버의 오류가 발견 시 자동으로 재라우팅도 도와줍니다.

 

완전 최신 기능이네요😊

😊간단 정리😊

1. elastic ip, ec2 instances, alb, nlb, public or private에서 사용이 됩니다.

2. 빠른 속도 그리고 빠른 장애 복구를 도와줍니다.

3. 항상 애플리케이션의 건강 상태를 확인합니다.

4. 애플리케이션을 글로벌 하게 만드는데 도움이 됩니다.

5. 2개의 외부 IP만 존재하여 보안적으로 안전합니다.

6. AWS Shield 덕분에 DDos에도 안전합니다.

😎장점😎

1. 가장 가까운 엔드포인트 접속을 자동으로 빠르게 라우팅을 도와줍니다.

2. 오류 발생 시 자동으로 차선의 엔드포인트로 즉각적 장애 조치를 도와줍니다.


😂단점😂

1. 사용자 인접 지역에 엣지가 없으면 오히려 느려질 수 있습니다.

2. 좀 비쌉니다...........


😉기타비교😉

1. Unicast IP vs Anycast IP

Unicast

 

Unicast  IP는 출발지와 목적지가 정확해야 하는 일대일 통신입니다.

Anycast

Anycast IP는 가장 가까운 Node와 통신하는 방식입니다.

공통적으로 전 세계의 엣지 로케이션을 사용하며 DDos보호를 위해 AWS Shield와 통합됩니다.


2. AWS Global Accelerator vs CloudFront

 

CloudFront

- 캐시 가능한 콘텐츠(이미지 및 비디오)

- 동적 콘텐츠 (API 및 동적 사이트)

 

Global Accelerator

- TCP 또는 UDP를 통한 광범위한 애플리케이션의 성능 향상

- 하나 이상의 AWS 리전에서 실행중인 애플리케이션

- 게임(UDP) Iot(MQTT) 또는 VoIP(Voice over IP)와 같은 NON-HTTP 사용.

- 고정 IP 주소가 필요한 HTTP 사용 사례

- 결정적이고 빠른 지역 장애 조치가 필요할 경우

react 실행을 했을 때 해당 오류를 볼 수 있습니다.

 

1. npm 재설치

npm cache clean --force
rm node_modules
npm install

혹은

npm update
node_modules 폴더 삭제
package-lock.json 삭제
npm cache clean --force
npm install

해당 경고창이 무수하게 떠서 무엇인지 알아보았습니다.

기본 내보내기는 더 이상 사용하지 않는다는 내용입니다.

 

1. import 수정

import create from'zustand'

 

import { create } from'zustand'

하단의 내용으로 수정하면 경고창이 말끔히 사라집니다. : )

C#을 사용하여 일정 기간 이전에 만들어진 로그 파일을 삭제하는 서비스를 만들어보았습니다.

  • 삭제할 기준의 날짜를 설정한다.
  • 해당 기준 이전의 파일이 txt파일 경우에 삭제한다.

 

 

1. C# 소스

try
{
    // 제거할 날짜 범위 (15일)
    byte Days = CAppConfig.cServiceInfo.MAX_STORAGE_DATE;
    string deletePath = @"C:\\Logs\\";

    DirectoryInfo di = new DirectoryInfo(deletePath);
    if (di.Exists)
    {
        DirectoryInfo[] dirInfo = di.GetDirectories();
        // 삭제 날짜 기준 -days(15일)
        string IDate = DateTime.Today.AddDays(-Days).ToString("yyyyMMdd");
        foreach (DirectoryInfo dir in dirInfo)
        {
            foreach (FileInfo file in dir.GetFiles())
            {
                // 확장자
                if(file.Extension != ".txt")
                {
                    continue;
                }

                // 해당 날짜 보다 작으면 삭제
                if (IDate.CompareTo(file.LastWriteTime.ToString("yyyyMMdd")) > 0)
                {
                    file.Delete();
                    logger.LogInformation($"[제거된 파일] {file.Name}");
                }
            }


            logger.LogInformation($"{dir.Name} 디렉토리 완료");
        }

    }
}

 

 

 

Setup - Create a Next.js App | Learn Next.js (nextjs.org)

 

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

참고하여 Next.js에 Navigate 기능인 Link를 달아보려고 합니다.

 

1. pages/posts/first-post.jsx를 생성해줍니다.

import Link from 'next/link';

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

2. index.js 편집

<h1 className="title">
	Read <Link href="/posts/first-post">this page!</Link>
</h1>

 

[this page] 클릭하면

서버통신이 없이 빠르게 이동하는  것을 확인할 수 있습니다.

'React > Next.js' 카테고리의 다른 글

간단한 Next.js 프로젝트 만들어보기  (0) 2023.02.18
Next.js 프로젝트 시작  (0) 2023.01.30

Setup - Create a Next.js App | Learn Next.js (nextjs.org)

 

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

참고하여 Next.js를 이용한 프로젝트를 만들어보려고 합니다.

 

1. 프로젝트 생성

# 프로젝트 세팅
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

# 폴더 접근
cd nextjs-blog

# 프로젝트 시작
npm run dev

 

2. 기본 구성 확인

'React > Next.js' 카테고리의 다른 글

[Next.js] Link 사용하기  (0) 2023.02.18
Next.js 프로젝트 시작  (0) 2023.01.30

MariaDB를 사용하다 보면 쓰기작업으로 인해 DeadLock이 발생할 경우가 있다.

Deadlock found when trying to get lock; try restarting transaction

 

1. DeadLock 분석 쿼리

# 현재 LOCK이 걸려 대기중인 정보
SELECT * FROM information_schema.INNODB_LOCK_WAITS;

# LOCK을 건 정보
SELECT * FROM information_schema.INNODB_LOCKS;

# LOCK을 걸고 있는 프로세스 정보
SELECT * FROM information_schema.INNODB_TRX;

# InnoDB 상태
SHOW ENGINE INNODB STATUS;

2. DeadLock 해결 팁

- 테이블 접근 순서 정하기

- 트랜잭션 내에서 특정 테이블에 대하여 한번만 접근

- Insert를 묶기

- 다수의 데이터를 Update or Delete 하지 않기

- start transaction 후 꼭 commit, rollback을 해서 누수 발생하지 않도록 하기

react 프로젝트를 실행할 때 간혹 Error: Cannot find module .... 라는 오류를 보게 됩니다.

 

해결방법

# 명령어로 캐시를 삭제
npm cache clean --force

# node_modules 폴더 삭제
# package-lock.json 파일 삭제

# 재설치
npm install

 

 

Putty version error

mremoteNG에서 linux 서버 ssh 접속을 할 때 해당 에러가 나올 때가 있습니다.
mremoteNG Unable to load key file (PuTTY key format too new)

putty version이 낮아서 생겨나는 오류입니다.

2가지 방법에 대해서 알아보겠습니다.

 

1. ppk version 낮추는 방법

Putty Key Generator
Key 메뉴 > Parameters for saving key files... 클릭
key 저장

ppk file 버전을 낮추는 방법을 알아보았습니다.

 

2. putty 버전을 올리는 방법

Download PuTTY: latest release (0.78) (greenend.org.uk)
putty를 0.75버전 이상을 사용하면 기존 ppk file를 그대로 사용할 수 있습니다.

+ Recent posts