chul gyu,Shin

개발자

[Docker] Angular를 Weblogic 12c에 이관

1 분 소요

Weblogic으로 Angular를 실행해보자.

프레젠테이션1

결론Permalink

  • Weblogic 에서 정적 html을 서비스 할 수 있다.

이왕 여기까지 왔으니…Angular까지 서비스를 만들려고 한다. Spring boot와 마찬가지로 Angular를 Weblogic에서 자동으로 배포할 수 있는 방법을 이야기한다. 소스는 github에 있다.

과정Permalink

흐름도

  1. Angular 프로젝트 생성.
  2. angular.json 설정 수정.
  3. Build

Angular 프로젝트 생성.Permalink

  1. Intellij 에서 Angular 프로젝트 생성

image

  1. module은 frontend로 생성한다.

image

  1. 아래와 같이 project 구조를 완성한다.

image

이전 Spring Boot를 유지하고 frontend를 추가로 만든 구조를 확인한다.

package.json 과 angular.json 수정Permalink

Weblogic 자동 배포를 위해, package.json과 angular.json 을 수정해야 한다.

  1. package.json의 ng build를 수정.
  2. angular.json의 outputPath과 assets를 수정

package.json의 ng build를 수정.Permalink

package.json은 시작/배포 명령어가 들어있다. 이중 build 명령어를 아래와 같이 수정한다.

"build": "ng build --base-href /frontend/"

base-href를 추가하지 않으면 css, js 파일들이 /frontend 이 빠진 상태로 찾아, 404 오류가 발생한다. base-href 를 추가하면 index.html에 아래와 같은 base tag를 생성한다.

<!DOCTYPE html>
<html lang="en">
<head>
...
    <base href="/frontend/">
...
</head>

angular.json의 outputPath와 assets를 수정.Permalink

web.xml / weblogic.xml 추가Permalink

weblogic에 배포할 때는 WEB-INF에 web.xml과 weblogic.xml을 추가해야 한다.

image

web.xmlPermalink
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         id="WebApp_ID" version="2.5">
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>
weblogic.xmlPermalink
<?xml version="1.0" encoding="UTF-8"?>
<weblogic-web-app xmlns="http://xmlns.oracle.com/weblogic/weblogic-web-app"
                  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xsi:schemaLocation="http://xmlns.oracle.com/weblogic/weblogic-web-app
                  http://xmlns.oracle.com/weblogic/weblogic-web-app/1.7/weblogic-web-app.xsd">
  <context-root>/frontend</context-root>
</weblogic-web-app>

angular.json 추가.Permalink

build WEB-INF 를 추가할 수 있도록 angular.json을 추가하자. build 시 WEB-INF 폴더가 자동으로 복사한다.

"assets": [ "src/favicon.ico",
            "src/assets",
            "src/WEB-INF"
          ],

자동 build를 위해서 outputPath를 수정하자. build의 결과물이 weblogic의 autodeploy 폴더로 생성한다.

"outputPath": "../weblogic-docker/domain/base_domain/autodeploy/frontend",

BuildPermalink

ng build --base-href /frontend/

image

결과Permalink

아래 URL로 접속해서 결과를 확인해보자.

http://localhost:7001/frontend/

image

참조Permalink

  • http://sauvikb.blogspot.com/2019/02/deploying-angular-app-to-weblogic-12c.html
    • angular 연동
  • https://stackoverflow.com/questions/51182322/whats-the-difference-between-base-href-and-deploy-url-parameters-of-angular
    • base-url / deploy-url
  • https://stackoverflow.com/questions/19786142/what-is-web-inf-used-for-in-a-java-ee-web-application
    • WEB-INF

참고