ABOUT ME

Today
Yesterday
Total
  • nuxt 프로젝트를 iis에 배포해보자!
    개발연습/vue.js 2022. 7. 11. 13:13

    1. 필요한 프로그램 설치

    nodejs LTS : https://nodejs.org/en/

     

    Node.js

    Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

    nodejs.org

    iisnode : https://github.com/Azure/iisnode

     

    GitHub - Azure/iisnode: Hosting node.js applications in IIS on Windows

    Hosting node.js applications in IIS on Windows. Contribute to Azure/iisnode development by creating an account on GitHub.

    github.com

    알맞는 운영체제 선택 후 설치

    url rewrite : https://www.iis.net/downloads/microsoft/url-rewrite

     

    URL Rewrite : The Official Microsoft IIS Site

    Install this extension or view additional downloads  OverviewIIS URL Rewrite 2.1 enables Web administrators to create powerful rules to implement URLs that are easier for users to remember and easier for search engines to find. By using rule templates, re

    www.iis.net

     

     

    2. 배포용 디렉토리 생성하기

    (배포용 디렉토리를 생성하지 않고, nuxt 프로젝트 위치를 iis 사이트에 등록해도 작동한다. 차이점은 알게 되는대로 수정예정)

    우선 nuxt 프로젝트의 루트폴더가 있는 위치로 이동한다.

    위 사진처럼 prod 폴더를 생성한다.

    nuxt 프로젝트를 열고, build를 해준다.

    nuxt 프로젝트에서 위에 선택된 4개의 폴더/파일을 복사해 prod 파일로 붙여넣기를 한다.

    prod 폴더에 web.config 파일 생성 후 편집을 위해 열어준다. (iisnode 폴더는 현재단계에서 없어도 상관이 없다.)

    <?xml version="1.0" encoding="utf-8"?>
    <!--
         This configuration file is required if iisnode is used to run node processes behind
         IIS or IIS Express.  For more information, visit:
    
         https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
    -->
    
    <configuration>
      <system.webServer>
        <!-- Visit https://azure.microsoft.com/en-us/blog/introduction-to-websockets-on-windows-azure-web-sites/ for more information on WebSocket support -->
        <webSocket enabled="false" />
        <handlers>
          <!-- Indicates that the server.js file is a Node.js site to be handled by the iisnode module -->
          <add name="iisnode" path="server" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
          <rules>
            <!-- Do not interfere with requests for node-inspector debugging -->
            <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
              <match url="^server\/debug[\/]?" />
            </rule>
    
            <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
            <rule name="StaticContent">
              <action type="Rewrite" url="public{REQUEST_URI}"/>
            </rule>
    
            <!-- All other URLs are mapped to the Node.js site entry point -->
            <rule name="DynamicContent">
              <conditions>
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
              </conditions>
              <action type="Rewrite" url="server"/>
            </rule>
    
            <rule name="HTTPS Redirect" stopProcessing="true">
                <match url="(.*)" />
                <conditions>
                    <add input="{HTTPS}" pattern="^OFF$" />
                </conditions>
                <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" appendQueryString="false" />
            </rule>
          </rules>
        </rewrite>
    
        <!-- 'bin' directory has no special meaning in Node.js and apps can be placed in it -->
        <security>
          <requestFiltering>
            <hiddenSegments>
              <remove segment="bin"/>
              <add segment="node_modules" />
            </hiddenSegments>
          </requestFiltering>
        </security>
    
        <!-- Make sure error responses are left untouched -->
        <httpErrors existingResponse="PassThrough" />
        <iisnode node_env="production" />
    
        <!--
          You can control how Node is hosted within IIS using the following options:
            * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
            * node_env: will be propagated to node as NODE_ENV environment variable
            * debuggingEnabled - controls whether the built-in debugger is enabled
    
          See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
        -->
        <!--<iisnode watchedFiles="web.config;*.js"/>-->
      </system.webServer>
    </configuration>

    web.config에 위 내용을 넣어준다.

     

    3. IIS 관리자에 nuxt 프로젝트 등록

    웹 사이트 추가 클릭

    사이트 이름 -> iis의 왼쪽 네비게이션 바에서 사이트에 나타날 이름

    실제경로 -> nuxt 프로젝트의 root경로

    바인딩 -> 본인의 iis서버 상황에 맞게 http / https 세팅, 상황에 알맞은 포트 세팅

    호스트 이름 -> 도메인이 있다면 입력해준다. 

    확인 클릭.

    iis 관리자 -> 응용 프로그램 풀 -> nuxt 프로젝트 사이트 선택 -> 고급 설정 -> 프로세스 모델 -> ID 부분을 LocalSystem으로 세팅

     

    4. 배포 완료!!

    iis에 사이트 등록 시 사용한 url로 접속해보자!

     

     

    참고영상 : https://www.youtube.com/watch?v=68hUMOQM9DA

    댓글

Designed by Tistory.