jswny

jswny OP

Yeah for the IP address I’m sure you can just use localhost or 127.0.0.1 and then the port like you have since the IP is just your local machine and the correct port.

The point of the nginx-network is not even specific to NGINX itself, it’s actually just to have a Docker network setup so that the services can communicate with each other. I just named it nginx-network since instead of being specific to a certain app that you have deployed, it is the overall network for all of your apps since NGINX needs to communicate with all of them, so you have to have all of the apps on the same network. I think as long as your database container and app container are on the same Docker network it won’t matter what the network is called. The app container just needs to be able to communicate with the database container. Then, like I said you expose the app container’s server port to the outside world (your local machine) for HAProxy to send traffic to.

Let me know if that makes sense!

0
Post #31
maz

maz

so after ./build.sh and docker-compose up I open http://localhost:5000 in a browser

and in the log I get
kjvrvg-server | ** (UndefinedFunctionError) function Mix.env/0 is undefined (module Mix is not available)

so I need to tip-off phoenix that I’m running on prod so I do:

config.exs:

config :kjvrvg,
  :environment, Mix.env()

but this is no change. What do I need to do to ensure that phoenix knows that I’m in a prod env and I should not use Mix?

also did dev.exs:

config :kjvrvg,
:environment, :dev

prod.exs:

config :kjvrvg,
:environment, :prod

kjvrvg-server | 03:30:14.049 [info] GET /
kjvrvg-server | 03:30:14.050 [info] Sent 500 in 878µs
kjvrvg-server | 03:30:14.054 [error] #PID<0.1460.0> running KjvrvgWeb.Endpoint terminated
kjvrvg-server | Server: localhost:5000 (http)
kjvrvg-server | Request: GET /
kjvrvg-server | ** (exit) an exception was raised:
kjvrvg-server |     ** (UndefinedFunctionError) function Mix.env/0 is undefined (module Mix is not available)
kjvrvg-server |         Mix.env()
kjvrvg-server |         (kjvrvg) lib/kjvrvg_web/views/layout_view.ex:13: KjvrvgWeb.LayoutView.webpack_css_path/2
kjvrvg-server |         (kjvrvg) lib/kjvrvg_web/templates/layout/app.html.eex:11: KjvrvgWeb.LayoutView."app.html"/1
kjvrvg-server |         (phoenix) lib/phoenix/view.ex:332: Phoenix.View.render_to_iodata/3
kjvrvg-server |         (phoenix) lib/phoenix/controller.ex:740: Phoenix.Controller.do_render/4
kjvrvg-server |         (kjvrvg) lib/kjvrvg_web/controllers/page_controller.ex:1: KjvrvgWeb.PageController.action/2
kjvrvg-server |         (kjvrvg) lib/kjvrvg_web/controllers/page_controller.ex:1: KjvrvgWeb.PageController.phoenix_controller_pipeline/2
kjvrvg-server |         (kjvrvg) lib/kjvrvg_web/endpoint.ex:1: KjvrvgWeb.Endpoint.instrument/4
0
Post #32
BrightEyesDavid

BrightEyesDavid

What Elixir code does LayoutView.webpack_css_path/2 contain? The first couple of webpack/Phoenix guides I found seem to assume that the Mix module is available to conditionally link to hot-reloaded CSS/JS, but, if I understand correctly, this won’t be the case if the app is running as a release built by Distillery, as I believe you’re finding.

If that’s the case, can you simplify LayoutView.webpack_css_path/2 so that it always outputs ‘/css/styles.css’ or whatever, without using Mix? (And the same for the JS function.)

I haven’t used webpack myself yet, and it’s entirely possible my post is misguided/wrong. If anyone has a link to a guide on replacing brunch with the latest version of webpack in Phoenix that works with releases, that would be great. :slight_smile:

1
Post #33
jswny

jswny OP

Like @BrightEyesDavid said, you can’t really use Mix in prod since it isn’t included in the release. So, what you should do is have Webpack build to the priv directory in your app’s root directory (like how the default Brunch build process works). Then, Distillery will package up your priv directory with your release, which you can then access in your code with priv_dir = Application.app_dir(:myapp, "priv"). You should probably then try rewriting that LayoutView.webpack_css_path/2 to pull from the built files in the priv directory.

0
Post #34
maz

maz

This is what it contains:

  def webpack_js_path(conn, path) do
    if Mix.env == :dev do
      static_path(conn, path)
    else
      "//localhost:8080#{path}"
    end
  end
  
  def webpack_css_path(conn, path) do
    if Mix.env == :dev do
      static_path(conn, path)
    else
      ""
    end
  end

app.html.eex:
<link rel="stylesheet" href="<%= webpack_css_path(@conn, "/css/app.css") %>">
<script src="<%= webpack_js_path(@conn, "/js/app.js") %>"></script>

so this is a little busted I guess, I will remove the Mix.env references, the whole if-structure and just unconditionally do:
"//localhost:8080/css/app.css"
and
"//localhost:8080/js/app.js"

Michael

~~ UPDATE ~~

So I did the above and phoenix is up and running(!), not getting the error anymore, but I think I broke css/webpack since the page is rendering completely unstyled. would it be the //localhost:8080/css/app.css path syntax? I feel this is a rigid hack.
here is what layout_view.ex looks like now:

defmodule KjvrvgWeb.LayoutView do
  use KjvrvgWeb, :view

  def webpack_js_path(conn, path) do
    "//localhost:8080/js/app.js"
  end
  
  def webpack_css_path(conn, path) do
    "//localhost:8080//css/app.css"
  end

end

kjvrvg-server | 04:06:57.909 [info] GET /
kjvrvg-server | 04:06:57.909 [info] Sent 200 in 356µs

1
Post #35
idi527

idi527

Mix.env might be not available during runtime. But you can use it during compilation

if Mix.env == :dev do
  def webpack_js_path(conn, path) do
    static_path(conn, path)
  end
else
  def webpack_js_path(conn, path) do
    "//localhost:8080#{path}"
  end
end
0
Post #36
BrightEyesDavid

BrightEyesDavid

Ah, that’s good to know.

I think the paths should be the other way around. (Static path for production.)

0
Post #37
maz

maz

The site now runs, but I’m not getting any styles using hard coded paths. I’m not sure if it’s malformed paths, missing resources or if webpack-server failed to run.

defmodule KjvrvgWeb.LayoutView do

use KjvrvgWeb, :view

def webpack_js_path(conn, path) do
//localhost:8080/js/app.js
end

def webpack_css_path(conn, path) do
//localhost:8080//css/app.css
end

end

0
Post #38
BrightEyesDavid

BrightEyesDavid

I’m not sure if I fully understand your post, but if this is for a release in production, I don’t think you want localhost:8080. My understanding is that that’s the webpack dev server, for hot reloading of assets during development.

Based on @idi527’s reply above, try:

if Mix.env == :prod do
  def webpack_js_path(conn, path) do
    static_path(conn, path)
  end
else
  def webpack_js_path(conn, path) do
    "//localhost:8080#{path}"
  end
end

if Mix.env == :prod do
  def webpack_css_path(conn, path) do
    static_path(conn, path)
  end
else
  def webpack_css_path(conn, path) do
    "//localhost:8080#{path}"
  end
end

I think you’ll also need to ensure that webpack is outputting the assets to whatever path static_path(conn, path) gives, if it doesn’t already.

1
Post #39
maz

maz

That was it, thanks. I guess I didn’t really understand what webpack was doing.

Got it! Deploying phoenix 1.3 + webpack via Docker! Thanks everyone!

The separate HAProxy deploy ansible playbook I was talking about earlier is working too. I just need to make a separate ansible role to run ./build.sh and docker-compose up and I’m good.

1
Post #40