I can not access public files such as images, among others

A cordial greeting.

I am learning to use the fly.io platform

To deploy apps in Phoenix, and the following problem happens to me:

I can’t access my files from the HOSTNAME url.

I tell you, my local project works fine.

Where I have elixir configured to compile with esbuild through custom aliases such as:

   "assets.deploy.test_build": [
     "cmd --cd assets node build-test.js --deploy",
     "phx.digest"
   ],

In the Dockerfile, I have the following statement:

compile assets

RUN cd assets
&& npm install
&& cd …
&& mix assets.deploy.test_build

But when I try to include a file for example css, it doesn’t show it and throws me a 404

From what I understood from the phoenix documentation, the builds go in the ./priv/static/assets folder

Try to find the directory by connecting through the command: flyctl ssh console

But I didn’t find anything, I don’t know where my project is either.

Would you able to post the full Dockerfile to see what’s going on? I’m sure one of the Phoenix guys on here will be able to assist.

1 Like
# Find eligible builder and runner images on Docker Hub. We use Ubuntu/Debian instead of
# Alpine to avoid DNS resolution issues in production.
#
# https://hub.docker.com/r/hexpm/elixir/tags?page=1&name=ubuntu
# https://hub.docker.com/_/ubuntu?tab=tags
#
#
# This file is based on these images:
#
#   - https://hub.docker.com/r/hexpm/elixir/tags - for the build image
#   - https://hub.docker.com/_/debian?tab=tags&page=1&name=bullseye-20210902-slim - for the release image
#   - https://pkgs.org/ - resource for finding needed packages
#   - Ex: hexpm/elixir:1.13.2-erlang-24.1.4-debian-bullseye-20210902-slim
#
ARG ELIXIR_VERSION=1.13.2
ARG OTP_VERSION=24.1.4
ARG DEBIAN_VERSION=bullseye-20210902-slim

ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-debian-${DEBIAN_VERSION}"
ARG RUNNER_IMAGE="debian:${DEBIAN_VERSION}"

FROM ${BUILDER_IMAGE} as builder

# install build dependencies
RUN apt-get update -y \
    && apt-get install curl -y \
    && apt-get install -y build-essential git \
    && apt-get clean \
    && rm -f /var/lib/apt/lists/*_* \
    && curl -sL https://deb.nodesource.com/setup_10.x | bash - \
    && apt-get install -y nodejs \
    && apt-get install -y npm

# prepare build dir
WORKDIR /app

# install hex + rebar
RUN mix local.hex --force && \
    mix local.rebar --force

# set build ENV
ENV MIX_ENV="prod"

# install mix dependencies
COPY mix.exs mix.lock ./
RUN mix deps.get --only $MIX_ENV
RUN mkdir config

# copy compile-time config files before we compile dependencies
# to ensure any relevant config change will trigger the dependencies
# to be re-compiled.
COPY config/config.exs config/${MIX_ENV}.exs config/

COPY priv priv

COPY lib lib

COPY assets assets

# compile assets
RUN cd assets \
    && npm install \
    && cd .. \
    && mix assets.deploy.campana_invierno

# Compile the release
RUN mix compile

# Changes to config/runtime.exs don't require recompiling the code
COPY config/runtime.exs config/

COPY rel rel
RUN mix release

# start a new build stage so that the final image will only contain
# the compiled release and other runtime necessities
FROM ${RUNNER_IMAGE}

RUN apt-get update -y && apt-get install -y libstdc++6 openssl libncurses5 locales \
  && apt-get clean && rm -f /var/lib/apt/lists/*_*

# Set the locale
RUN sed -i '/en_US.UTF-8/s/^# //g' /etc/locale.gen && locale-gen

ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8

WORKDIR "/app"
RUN chown nobody /app

ENV PORT=8080
EXPOSE ${PORT}

# set runner ENV
ENV MIX_ENV="prod"

# Only copy the final release from the build stage
COPY --from=builder --chown=nobody:root /app/_build/${MIX_ENV}/rel/api ./

USER nobody

CMD ["/app/bin/server"]

Well … as regards using fly ssh console and not seeing your app, as I read the last bit of that file, there should be an /app folder. Isn’t there? That would be where I’d look.

As regards the paths to static files, like .css, I don’t know enough about it and I don’t want to tell you the wrong thing (with a guess). Someone here will be able to help though :slight_smile:

Yes, I do have the folder. And I can also consume an API route that I create for testing.

The problem is that I can’t access public files like images, after deploying in phoenix.

thanks for giving me clues

1 Like

Can you check to see if the node build artifacts made into the private directory?

$ fly ssh console
$ ls /app/lib/your_app-0.1.0/priv

Replace your_app and the 0.1.0 release version with whatever is relevant and report back. Thanks!

1 Like

Hello, thank you very much for your answer.

I just saw the route, which I did not know. Where if I see the public files such as js, css.

image
attached capture of what a folder looks like, which has a js file

I haven’t been able to figure out the problem yet.

Sorry can you show the folder contents, as well as the path that results in a 404? Your endpoint’s Plug.Static options would also be helpful to see

1 Like

Dear, reviewing the code along with your comment I saw that it was missing to add the folder in “only”:

  plug Plug.Static,
    only: ~w(assets inpages fonts images favicon.ico robots.txt)

thanks