분산형 채팅 서버 매트릭스를 처음 알게 되자마자 사람들은 각자 자기 도메인에 매트릭스 서버를 올려서 사용하기 시작했어요.

하지만 저는 그 와중에도 자기만의 채팅서버라든지 각종 브릿지라든지 예쁜 서버명 등, 서버를 올렸을 때 가져갈 수 있는 메리트엔 별 관심이 없었고, 오로지 클라이언트에만 관심이 있었어요.

엘리먼트, 플러피챗 등의 다양한 매트릭스 클라이언트를 접하면서,

"아, 나는 꼭 나중에 엘리먼트를 포크해서 나만의 귀여운 채팅방을 꾸며볼거다"

라고 다짐했습니다. 그리고 바로 어제 그 꿈을 이루었어요.

원본 소스 다운로드해서 올려보기

원본 소스를 포크한 뒤 클론하는 것으로 본격적인 귀여운 채팅방 만들기 프로젝트가 시작되었어요.

로컬에 클론하면 우선 브랜치가 master로 옳게 지정되어 있는지를 확인한 뒤(develop 아니면 될 듯?) config.json 파일을 만들어서 설정을 넣어주면 됩니다.

그다음 yarn install 쳐서 디펜던시 다 다운받은 뒤 yarn dist 하면 올라갑니다.

물론 노드 버전 같은 걸 좀 확인해야 해요. 제가 올려본 애들 중에서 가장 높은 버전을 요구하는 듯 합니다.

아무튼 이 상태로 파일들을 뭔가 수정하면, 새로 빌드하지 않아도 수정 내역이 적용됩니다.

CSS같은 종류는 안 됐던 것 같은데 그 경우에는 새로고침 하면 적용됩니다.

한국어 적용하기

원본 element는 한국어 로케일 파일이 없어요. 일본어는 있는데 한국어는 없더라구요. 아무래도 제 클라이언트인데 한국어가 없는 게 너무 신경쓰여서 한국어 파일을 만들기로 했어요.

이거 어떻게 했는지는 잘 기억이 안 나는데 아무튼 한국어 locale이 담긴 json을 추가로 만들었어요. 이게 시작 단계입니다.

아마 공식 번역은 아니게 될 듯 합니다. (사유: 제가 한국어를 너무 못하더라구요)

일본어에서 복사해와서, 대부분의 문구는 일본어가 적용되어 있습니다. 요건 영어보다 일본어가 한국어랑 어순이 대체로 비슷해서 긁어가면서 번역하기 쉬워서 그렇습니다.

피치타르트향 글씨체 적용하기

폰트의 경우는 그냥 font-family 같은 거 검색해서 바꾸면 됩니다. 근데 src를 다 입력해줬는데도 로컬에서만 폰트를 불러오더라구요... 하 이건 나중에 고치겠습니다 제 컴들에는 다 갈무리가 있어서요... 딱히 불편함이 없어요.

피치타르트향 테마 적용하기

vs코드에서 엘리먼트의 메인 컬러(뭐였는지 기억은 안 나는데)를 검색해서 #ff9899로 일괄 변경(..!) 해 주었습니다.

그리고 나서 png 파일 같은 것도 하나하나 내려받아서 색을 변경해주었구요...

엘리먼트는 기본적으로 배경화면이 무슨 이상한 자연이 물씬 느껴지는 호수 사진 / 로그인하면 자기 프로필 사진 이렇게 되는데, 요 부분을 피치타르트 배경 일러스트로 교체했습니다.

그렇게 해서 만들어진 저의 귀요미 테마는 이런 느낌입니다.

여기까지 한 다음 이제 도메인을 연결해야겠다 싶어서 새 서버를 deploy하고 yarn start를 입력해봤는데, 아웃 오브 메모리가 뜨는 거예요.

하지만 이건 빌드상의 문제다. 빌드만 통과하면 도는 데는 문제없다 싶어서 기존에 미스키를 빌드하던 대로 깃허브에서 빌드하고 docker.io에 올린 다음 이미지를 다운로드받아서 돌리기로 했어요.

Docker Image 만들기

원본 소스에는 도커 이미지를 만드는 것을 도와주는 Dockerfile이 있었습니다. 그래서 그걸 참고해서 워크플로우를 만들고 실행하면 되었어요. 하지만 역시나 오류가 났습니다.

RUN dos2unix /src/scripts/docker-package.sh /src/scripts/get-version-from-git.sh /src/scripts/normalize-version.sh && bash /src/scripts/docker-package.sh

이 부분에서 문제가 발생하길래, docker-pakage.sh 같은 파일들을 일일이 까 보았습니다. 깃 브랜치 문제였던 것으로 대강 판명이 났습니다.

음 어쩔 수 없군, 어차피 master 브랜치에서만 굴릴 거니까, master 브랜치이기만 하면 실행되게 만들자. 정도의 안일함으로 도커파일을 수정해 주었습니다. 그러자 빌드가 잘 되었습니다.

그리고 도커 이미지로 빌드해주는 것 정도는 깃허브에 미리 지정된 워크플로우 양식이 있었는데, docker.io에 올려주는 건 또 별개로 직접 짜야 했어요. 하지만 저는 이런 걸 처음 해 보기 때문에-

그냥 챗지피티에게 물어봤어요.

다음은 챗지피티를 참고해서 만든 워크플로우 파일입니다.

name: Docker Image CI

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:

  build:

    runs-on: ubuntu-latest

    steps:
      # 1. 리포지토리 체크아웃
      - uses: actions/checkout@v4

      # 2. Docker Hub 로그인
      - name: Log in to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      # 3. Docker 이미지 빌드 및 태그
      - name: Build and tag the Docker image
        run: |
          docker build . --file Dockerfile --tag ${{ secrets.DOCKER_USERNAME }}/elementart:latest
          docker tag ${{ secrets.DOCKER_USERNAME }}/elementart:latest ${{ secrets.DOCKER_USERNAME }}/elementart:master

      # 4. Docker 이미지 푸시
      - name: Push Docker image to Docker Hub
        run: |
          docker push ${{ secrets.DOCKER_USERNAME }}/elementart:latest
          docker push ${{ secrets.DOCKER_USERNAME }}/elementart:master

미스키의 Docker-Compose 파일 수정하고 nginx 설정하기

미스키의 docker-compose 를 켜고 끌 때 같이 실행되도록 만들고 싶었어요. 사실 잘 모르는 것도 한몫했지만 아무튼... 미스키 docker-compose 파일을 아래와 같이 수정했습니다.

services:

  (web 부분)

  element:
    image: jyhyun1008/elementart:latest
    restart: always
    ports:
      - "3443:3443"
    volumes:
      - ./config.json:/elementart/config.json

그러고 나서 미스키 경로 폴더에 미리 설정된 config.json만 하나 복사해서 붙여 주었어요.

nginx도 추가로 설정해야 했는데 기존 설정들 잘 복붙한 다음 수정해 주면 됩니다. 도메인이랑 인증서 도메인, 포트만 바꾸면 돼서 별로 바꿀 게 없었어요.

맞다 포트... 아무래도 80포트에는 nginx가 구동되고 있으니 포트도 8080에서 3443으로 수정을 했는.. 데 서버의 nginx 말고 레포지토리 내의 nginx/conf.d/default.conf 가셔서 바꿔 주심 됐던 것 같아요.