최근 angular에 접할 기회가 있어, Phoenix에서 함께 개발할 수 없을까-라고 생각해 조금 시도해 보았습니다.

환경

Elixir : 1.6.4 (compiled with OTP 20)

phoenix : 1.3.4

Node : v8.9.3

Angular CLI: 7.0.2

Phoenix 프로젝트 만들기

$ mix phx.new ng_phx --no-brunch --no-html

JS의 빌드 도구인 brunch와 html은 작성하지 않습니다.

Angular-CLI로 프로젝트 만들기

$ cd ng_phx
$ ng new web

Phoenix 프로젝트 안에 angular 프로젝트를 만듭니다.
angular-cli에게 묻는 내용은 기호로.

config/dev.exs 편집

watchers의 장소를 다음과 같이 합니다

config/dev.exs

   debug_errors: true,
   code_reloader: true,
   check_origin: false,
-  watchers: []
+  watchers: [
+    ng: ["build", "--watch", "--output-path=../priv/static/web", "--base-href=/web/", cd: Path.expand("../web/", __DIR__)]
+  ]

 # ## SSL Support
 #

빌드의 출력처를 priv/static/web 로 하고 있습니다.ng build 는 빌드하기 전에 빌드 대상 디렉토리를 정리합니다.
서브 디렉토리를 하나 추가하고 있습니다.
또한 그것과 함께 base href 설정도 추가했습니다.

그런 다음 .gitignore에 /priv/static/web를 추가합니다.

.gitignore

 # secrets files as long as you replace their contents by environment
 # variables.
 /config/*.secret.exs
+
+ # ng build output directory
+/priv/static/web

endpoint 편집

angular는 SPA로 움직이기 때문에 /web/index.html에 액세스해도 /web/로 날아 버립니다.
그러므로 /web/로 액세스하더라도 /web/index.html로 리디렉션되도록 설정을 추가합니다.

또한 priv/static/web 아래에 정적 파일로 액세스하기 위해
plug, Plug.Static only에 웹 추가

lib/ng_phx_web/endpoint.ex

 defmodule NgPhxWeb.Endpoint do
   use Phoenix.Endpoint, otp_app: :ng_phx

+  def redirect_index(conn = %Plug.Conn{path_info: ["web"]}, _opts) do
+    %Plug.Conn{conn | path_info: ["web", "index.html"]}
+  end
+
+  def redirect_index(conn, _opts) do
+    conn
+  end
+
+  plug :redirect_index
+
   socket "/socket", NgPhxWeb.UserSocket

...

   # when deploying your static files in production.
   plug Plug.Static,
     at: "/", from: :ng_phx, gzip: false,
-    only: ~w(css fonts images js favicon.ico robots.txt)
+    only: ~w(web css fonts images js favicon.ico robots.txt)

서버 시작

여기까지 설정하면 나머지는 다음 명령을 실행하면 Phoenix에서 angular를 이동할 수 있습니다

$ mix phx.new

ng build 시간이 걸리므로 조금 기다리십시오.
http://localhost:4000/web/ 에 액세스하여 angular 로고가 표시되면 성공합니다

같은 도메인에서 시작하기 때문에 CORS 문제 등은 없다고 생각합니다.
다만, ng build 의 생성물을 표시하고 있을 뿐이므로, browser sync 가 없는 것이 조금 힘들군요・・・
(나중에 ng build가 미묘하게 느립니다)

다른 좋은 방법 등 있으면 가르쳐 주시면 기쁩니다!

이번 샘플은 어떻게 올려
htps : // 기주 b. 코 m/타마누기/응 g_phx