React로 Frontend 앱을 만들었다면~ 실행할 때 npm start 또는 nx serve ngmsoftware와 같이 nodejs 또는 serve를 사용해서 실행해야 합니다. 간단한 테스트용 웹서버는 npm을 통해서 설치할 수 있습니다. 아래 명령을 사용합니다.

$ npm install -g serve

 

nx 설정은 좀 더 복잡합니다. 이건 아래 링크의 내용을 참고해서 설치하시면 됩니다. nx를 안쓰면 npm start로 실행할 수 있습니다.

[ nx 설치 및 설정 ]

 

React를 배포 빌드하면 build 폴더가 생기고, 파일들이 만들어집니다. 제 경우에는 다른 폴더로 설정되어 있는데요. project.json 파일에서 설정할 수 있습니다.

  "targets": {
    "build": {
      "executor": "@nrwl/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
        "outputPath": "dist/apps/ngmsoftware",
...
...

 

윈도우 10 또는 윈도우 11에서 IIS를 설치 해줍니다. 완전 초보자를 대상으로 글을 작성하는게 아니다보니... 요점만 추가하여 정리하고 있습니다^^; 초보자 분들은 각각의 설정은 직접 찾아보시고, 어려운 부분이 있으시면 홈페이지의 커뮤니티 > 질문과 답변 게시판에 남겨주세요.

 

 

저는 project.json 파일에서 outputPath를 dist/apps/optima로 설정했기 때문에 일반적인 build 폴더에 만들어지진 않습니다.

 

 

파일들이 모두 만들어졌으면 IIS 관리자를 실행하세요. (Windows 실행에서 inetmgr 입력) 그리고, 사이트에서 웹 사이트 추가를 선택하세요.

 

 

사이트 이름과 위의 outputPath를 실제 경로에서 선택하세요. 중간쯤 바인딩에서 포트도 변경해줘야 합니다. 제 경우에는 80 포트를 이미 사용하고 있기 때문에 2023으로 변경했습니다. 만약, 윈도우에 실행중인 서버가 없다면 기본 값인 80포트를 그대로 사용해도 됩니다.

 

 

이제 웹브라우저를 실행하고, localhost:2023(포트를 변경하지 않았다면 localhost)으로 이동 해보세요. 리엑트 사이트가 표시됩니다^^

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0