Feature/front/seo

[1000peach]

177

작업/pr 작성중 입니다

찾아봐서 간단한 메타태그만 추가하고 있는데 적용 되는지 테스트를 해야할 거 같아요..! 좀 이따 해당 브랜치로 잠깐 배포하고 다시 master로 돌려놓겠습니다

[1000peach]

이 부분 react-helmet-async 로 작업해봤는데, title이랑 desc는 페이지마다 변하긴 하는데 공유는 안 돼서 index.html에 있는 메타 태그만 적용되는 거 같아요 8ㅅ8 CSR 한계 같은데 react-snap 시도해봤는데 안 되네요 😂

지금은 다시 마스터 브랜치로 배포한 상태입니다.! 혹시 다른 방안이나 의견,, 있으시면 부탁드려요 🙇‍♀️

(메인 이미지는 내일 중으로 희재 님이 작업해 주신다고 합니다)

@kimsehwan96 @choisohyun @geneaky

+ 추가

만약에 페이지 별로 적용되지 않는다면 index.html에 고정적인 메타태그 양식 추가하겠습니다.! (title, desc, keywords, image 등)

[kimsehwan96]

@1000peach 넵 해당 내용 한번 찾아볼게요 !

[kimsehwan96]

@1000peach react-snap을 적용하기 위해서는 빌드 할 때 (jenkins에서 react app을 프로덕션 빌드하는 과정) 특정 스크립트가 적용되어야 할 것 같아요!! 한번 적용해볼게요

[1000peach]

@kimsehwan96 넵 감사합니다.! 저도 계속 찾아볼게요

• 지금 react-snap 적용 취소한 상태인데 필요하시면 댓글 남겨주세요 다시 해서 올릴게요!

[kimsehwan96]

@1000peach 아아 react-snap 적용 로컬에서 해보았는데...react-snap 크롤러,,? 가 경로를 다 찾질 못하는 것 같네요 ㅠ-ㅠ 로컬 빌드 혹시 해보셨었나요 ?_?

아 그러구 .. "postbuild"가 빌드 이후 자동으로 실행되는 스크립트인지 몰랐어요 ㅎㅎ; 아마 snap 적용하셨을 때 안되었으면 안된게 맞긴 한거 같아요..!!

저는 #188 요 브랜치에 있는 것 처럼 index.tsx 수정했었거든요 !!

빌드 결과 콘솔아웃풋은 다음과 같았어요

+ 추가

index.tsx

import React from 'react';
import {render, hydrate} from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

import theme from './styles/theme';
import GlobalStyle from './styles/GlobalStyle';

import {ThemeProvider} from 'styled-components';
import {HelmetProvider} from 'react-helmet-async';

const rootElement: any = document.getElementById('root');

if (!!rootElement &&rootElement.hasChildNodes()) {
  hydrate(
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <HelmetProvider>
          <App />
        </HelmetProvider>
        <GlobalStyle />
      </ThemeProvider>
    </React.StrictMode>,
    rootElement
  );
} else {
  render(
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <HelmetProvider>
          <App />
        </HelmetProvider>
        <GlobalStyle />
      </ThemeProvider>
    </React.StrictMode>,
    rootElement
  );
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

++ 추가

아하.. package.json 에 직접 주소를 입력하지 않으면 안되나보네요..!

[1000peach]

@kimsehwan96 아뇨 로컬에서는 안 해봤어요 8ㅅ8 저는 이 링크 참고해서 https://satisfactoryplace.tistory.com/131 지금 작업하신거랑 거의 비슷하게 했습니다.!

근데 빌드하다가 오류가 나서 https://github.com/stereobooster/react-snap/issues/132 정확히 위 링크는 아니지만 package.json에서 reactSnap에 인자를 몇 개 더 추가했어요..!

[kimsehwan96]

@1000peach 아하!!

저도 지금 package.json에 다음과 같이 경로를 수동으로 추가해봤거든요 !!

뭔가 잘 되는것 같아요 ?_?

각 경로에 대한 index.html 도 떨어지는 것 같아요 !!

[1000peach]

@kimsehwan96 오오 그러네요 제가 뭘 하다가 꼬인 걸까요. ...?.? ㅋㅋㅋㅋㅋ 되는 거 같아요!!! 👍👏

[kimsehwan96]

@1000peach 아 jenkins에서 빌드할때 저도 승아님이랑 동일한 에러가 발생하네요!

제 리눅스 서버 문제인것 같아요 ㅠ-ㅠ

https://whiumisc.tistory.com/93

승아님 문제가 아니였던 것 같습니..다

+ 추가

승아님 배포하다 오류난거 확인해보니까 리눅스 서버쪽 chromium 관련 라이브러리가 미설치되서 발생했었구 설치하고 배포해보니까 잘 되는 것 같아요!!

승아님이 작업하셨던거 다시 한번 배포해보시면 이제는 될거에요!!

[1000peach]

@kimsehwan96 헉 그렇군요 ㅠㅠ 지금 늦었는데 서버 쪽에서 공수가 많이 드는 건 아닌가요?!

[kimsehwan96]

@1000peach 넵 소프트웨어 패키지 몇개 설치하는거라 다했어요!

• react-snap 배포 한번 테스트 해봤는데 아까 그 오류는(젠킨스에서 빌드할때 발생하는 오류) 사라진 것 같아요 !

188 요 브랜치로 임시로 https://www.seeat-plant.com/ 배포해두었는데 혹시 작업하신 것 반영이 되었는지 확인이 될까요 ?_?

[1000peach]

@kimsehwan96 오오 고생하셨어요! 👏👏

확인해봤는데, 메타 태그 변경 자체는 잘 되는데 링크 공유 시에는

1. 메인 페이지 / 식물 도감 / 테스트는 index.html에 있는 내용을 출력하고
2. 테스트 결과 페이지 / 식물 상세 정보 페이지 -> 여기는 아예 미리보기가 출력되지 않네요 8ㅅ8

react-snap을 사용해도 helmet을 써서 바꾼 메타태그는 인식하지 못하는 거 같기도 합니다. ㅠㅠ

+ 추가

만약 이렇게 되면 하나의 링크 공유라도 잘 될 수 있게 react-helmet을 쓰지 않고 index.html에 고정된 메타태그를 추가해야 할 거 같아요 😥

[kimsehwan96]

@1000peach 넵..! 시간상 그렇게 해야겠네요 😂 고생하셨습니다 !!

[1000peach]

@1000peach 넵..! 시간상 그렇게 해야겠네요 😂 고생하셨습니다 !!

넵 고생하셨어요!!! 😂👍