django-vue-cli-webpack-demo
django-vue-cli-webpack-demo copied to clipboard
EugeneDae
Example with Docker?
This seems like such a neat solution to incorporating Vue.js into a django app. I'm wondering if you could show an example of how you'd incorporate this into a Docker based setup. I've got it working just fine for my dev image, but I'm having trouble understanding how to make it build the files for production so that they're actually served from the static directory instead of from the webpack dev-server.
My super basic Dockerfile for django is below:
# pull official base image
FROM python:3.8.3-alpine
# set work directory
WORKDIR /usr/src/app
# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
RUN apk update \
&& apk add postgresql-dev gcc python3-dev musl-dev
# install dependencies
RUN pip install --upgrade pip
COPY ./requirements.txt .
RUN pip install -r requirements.txt
COPY ./entrypoint.sh .
# copy project
COPY . .
ENTRYPOINT ["/usr/src/app/entrypoint.sh"]
Do I just add?
ENV NODE_ENV = 'production'
RUN cd frontend
RUN yarn build
RUN cd ..
NB: My frontend directory lives inside of the app/ directory so it gets copied over in the "copy project" step.
I've realized that the commands should be:
ENV NODE_ENV production
RUN cd frontend; yarn build
But the index file generated still has local links:
<link href="http://127.0.0.1:8080/js/app.js" rel="preload" as="script"><link href="http://127.0.0.1:8080/js/chunk-vendors.js" rel="preload" as="script"></head>
<body >
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- html-webpack-inject will inject body assets below -->
<script type="text/javascript" src="http://127.0.0.1:8080/js/chunk-vendors.js"></script><script type="text/javascript" src="http://127.0.0.1:8080/js/app.js"></script></body>
</html>