[4일차] CI/CD 뻘짓 2차전 및 meta 태그적용

4일차에는 검색엔진 활성화를 위한 메타 태그를 적용하려다 package 의존성이 또 잘못되어 뻘짓을 진행하게 되었다.

 

1. CI/CD 뻘짓 2차전

지난시간에 fsevents 이슈에 의해 배포자동화가 동작하지 않는 문제가 있어 optionalDependencies 로 해결했었다. 그 뒤 디자인 적용과, 검색엔진최적화(SEO) 작업을 위해 아래 포스트를 참조하여 작업을 진행했다.

 

https://velog.io/@byseop/SPA%EC%97%90%EC%84%9C-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%84-%EA%B5%AC%EC%B6%95%ED%95%98%EC%A7%80-%EC%95%8A%EA%B3%A0-SEO-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0

SPA에서 서버사이드 렌더링을 구축하지 않고 SEO 최적화하기

 

그리곤 망했다.

 

react-snap이 어떤 역할을 하는진 모르겠으나 chrome 브라우저 및 관련 라이브러리를 찾는데, 현재 내가 개발하고 있는 환경인 wsl2 에선 해결방법을 찾을 수 없었다.

 

그래서 포기하고 롤백을 하고나니, 이번엔 빌드가 안된다.

총체적 난국이었다.

 

결국 wsl2 Ubuntu 설치환경까지 다 날렸다가 재설치하고, 마지막으로 배포성공했던 package-lock 정보를 git에서 가져와 어찌저찌 복원할 수 있었다.

2. meta 태그 적용

뻘짓 작업을 뒤로하고, meta 태그를 수동으로 index.html 파일에 작성하였다. 원래 목표는 각 view 별 html 페이지 생성 및 meta 태그 적용이었으나, react-snap 이 쏘아올린 재앙으로 인해 여기에서 만족했다.

 

이제 사이트 주소를 SNS 나 카카오톡에 입력하면 자동으로 간략한 사이트 정보와 아이콘 정보가 표시된다.

 

3. firebaseConfig 적용

애널리틱스 연동을 위해선 firebaseConfig 설정이 필요하다. firebae 프로젝트 생성과 함께 자동 생성된 github action이 배포를 자동으로 처리해줘 안써도 될줄 알았는데 결국 필요하다.

 

설정은 이전 "뮤직플레이어 웹앱"에서 경험했기 때문에 크게 어렵진 않았다.