웹 개발 환경 설정

improve this page | report issue

개요

웹 애플리케이션을 개발하고 테스트하는 것은 사용자가 선택한 웹 브라우저에서 로컬 HTML 파일을 미리 보는 것만큼 쉽습니다.
개발자는 선택한 IDE를 사용할 수 있고 요구에 맞는 모든 프레임워크를 사용할 수 있습니다.

하지만 웹 애플리케이션 개발을 방해하는 문제가 하나 있을 수 있습니다. 동일 출처 정책 위반으로 인해 웹 애플리케이션에 오류가 발생할 수 있습니다. 동일 출처 정책은 웹 브라우저에 적용되는 제한사항입니다. 예를 들어, 애플리케이션이 도메인 example.com에서 호스팅되는 경우 동일한 애플리케이션은 다른 서버 또는 해당 문제에 대해 MobileFirst Server에서 사용할 수 있는 컨텐츠에 액세스할 수 없습니다.

Mobile Foundation 웹 SDK를 사용해야 하는 웹 앱은 지원되는 토폴로지에서 처리되어야 합니다(예: 리버스 프록시를 사용하여 동일한 단일 출처는 유지하면서 적절한 서버로 내부적으로 요청의 경로를 재지정함).

정책 요구사항은 다음 방법 중 하나를 사용하여 충족할 수 있습니다.

  • MobileFirst Server도 호스팅하는 동일한 WebSphere Full/Liberty 프로파일 애플리케이션 서버에서 웹 애플리케이션 리소스 제공
  • Node.js를 프록시로 사용하여 애플리케이션 요청의 경로를 MobileFirst Server로 재지정

다음으로 이동

전제조건

  • 다음 브라우저 버전용 웹 애플리케이션이 지원됩니다. 버전 번호는 각 브라우저의 완전히 지원되는 버전 중 가장 빠른 버전을 나타냅니다.

    브라우저 Chrome Safari* Internet Explorer Firefox Android 브라우저
    지원되는 버전 43+ 8+ 10+ 38+ Android 4.3+

    * Safari의 경우, 개인용 브라우징 모드는 SPA(단일 페이지 애플리케이션)에 대해서만 지원됩니다. 다른 애플리케이션에서는 예상치 않은 동작이 발생할 수 있습니다.

  • 다음 설정 지시사항을 수행하려면 개발자의 워크스테이션에 Apache Maven 또는 Node.js가 설치되어 있어야 합니다. 추가 지시사항은 설치 안내서를 참조하십시오.

WebSphere Liberty 프로파일을 사용하여 웹 애플리케이션 리소스 제공

웹 애플리케이션의 리소스를 제공하려면 Maven webapp(.war 파일)에 이를 저장해야 합니다.

Maven webapp 원형 작성

  1. 명령행 창에서 사용자가 선택한 위치로 이동하십시오.
  2. 다음 명령을 실행하십시오.

    mvn archetype:generate -DgroupId=MyCompany -DartifactId=MyWebApp -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false
    
    • MyCompanyMyWebApp을 사용자의 고유 값으로 바꾸십시오.
    • 값을 하나씩 입력하려면 -DinteractiveMode=false 플래그를 제거하십시오.

웹 애플리케이션의 리소스를 사용하여 Maven webapp 빌드

  1. 웹 애플리케이션의 리소스(예: HTML, CSS, JavaScript 및 이미지 파일)를 생성된 [MyWebApp] → src → Main → webapp 폴더 내부에 배치하십시오.

    여기서부터 webapp 폴더를 웹 애플리케이션의 개발 위치로 간주하십시오.

  2. mvn clean install 명령을 실행하여 애플리케이션의 웹 리소스가 포함된 .war 파일을 생성하십시오.
    생성된 .war 파일은 [MyWebApp] → target 폴더에 있습니다.

    중요: 웹 리소스를 업데이트할 때마다 mvn clean install을 실행해야 합니다.

애플리케이션 서버에 Maven webapp 추가

  1. WebSphere Application Server의 server.xml 파일을 편집하십시오.
    MobileFirst Developer Kit을 사용하는 경우 파일의 위치는 [MobileFirst Developer Kit] → mfp-server → user → servers → mfp 폴더입니다. 다음 항목을 추가하십시오.

    <application name="MyWebApp" location="path-to/MyWebApp.war" type="war"></application>
    
    • namepath-to/MyWebApp.war을 사용자의 고유 값으로 바꾸십시오.
    • 변경사항을 server.xml 파일에 저장하고 나면 애플리케이션 서버가 자동으로 다시 시작됩니다.

웹 애플리케이션 테스트

웹 애플리케이션을 테스트할 준비가 되면 URL localhost:9080/MyWebApp을 방문하십시오. - MyWebApp을 사용자의 고유 값으로 바꾸십시오.

Node.js 사용

Node.js는 웹 애플리케이션에서 MobileFirst Server로 요청을 전달하는 리버스 프록시로 사용될 수 있습니다.

  1. 명령행 창에서 웹 애플리케이션의 폴더로 이동한 후 다음과 같은 명령 세트를 실행하십시오.

    npm init
    npm install --save express
    npm install --save request
    
  2. node_modules 폴더에 새 파일을 작성하십시오(예: proxy.js).
  3. 다음 코드를 파일에 추가하십시오.

    var express = require('express');
    var http = require('http');
    var request = require('request');
    
    var app = express();
    var server = http.createServer(app);
    var mfpServer = "http://localhost:9080";
    var port = 9081;
    
    server.listen(port);
    app.use('/myapp', express.static(__dirname + '/'));
    console.log('::: server.js ::: Listening on port ' + port);
    
    // Web server - serves the web application
    app.get('/home', function(req, res) {
         // Website you wish to allow to connect
         res.sendFile(__dirname + '/index.html');
    });
    
    // Reverse proxy, pipes the requests to/from MobileFirst Server
    app.use('/mfp/*', function(req, res) {
         var url = mfpServer + req.originalUrl;
         console.log('::: server.js ::: Passing request to URL: ' + url);
         req.pipe(request[req.method.toLowerCase()](url)).pipe(res);
    });
    
    • port 값을 선호하는 값으로 바꾸십시오.
    • /myapp을 웹 애플리케이션에 대해 선호하는 경로 이름으로 바꾸십시오.
    • /index.html을 기본 HTML 파일의 이름으로 바꾸십시오.
    • 필요한 경우 /mfp/*를 Mobile Foundation 런타임의 컨텍스트 루트로 업데이트하십시오.
  4. 프록시를 시작하기 위해 node proxy.js 명령을 실행하십시오.
  5. 웹 애플리케이션을 테스트할 준비가 되면 URL server-hostname:port/app-name을 방문하십시오(예: http://localhost:9081/myapp).
    • server-hostname을 사용자의 고유 값으로 바꾸십시오.
    • port를 사용자의 고유 값으로 바꾸십시오.
    • app-name을 사용자의 고유 값으로 바꾸십시오.

다음 단계

웹 애플리케이션에서 Mobile Foundation 개발을 계속하려면 Mobile Foundation 웹 SDK를 웹 애플리케이션에 추가해야 합니다.

Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on May 13, 2020