angular-docker.md

Angular in Docker

VirtualHost

Apache allows virtual host configuration to be bound on ports and manage configuration for domain requests using ServerName and ServerAlias directives. A default virtual host configuration has been added below and works well to serve Angular output.

<VirtualHost *:80>

    ServerAdmin [email protected]

    DocumentRoot /usr/local/apache2/htdocs

    <Directory /usr/local/apache2/htdocs>
        Options -Indexes +FollowSymLinks +MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>

    # Logs for local development only!
    # CustomLog /var/log/apache/access.log combined
    # ErrorLog /var/log/apache/error.log

</VirtualHost>

vhosts/000-default.conf

VirtualHost default configuration

SPA Configuration

Apache responds for requests to unresolved resources with a 404 response. This does not work well with SPAs, which implement routing on the client-side. To fix this, a .htaccess file is required.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

src/.htaccess

The configuration required to make SPA work with non-root route paths.

In order to add the .htaccess file into the compiled output, it must be added as an asset in the angular.json file. Update the projects.mylounge.architect.build.assets array by adding src/.htaccess. Update the value with the core application name configured in your angular.json file. Now, npm run build will load this file into the dist output.

Dockerfile

Below is an example of a sensible Dockerfile. Update the value with the core application name configured in your angular.json file.

FROM httpd:2.4

# BEGIN SETUP ENV
RUN mkdir /var/log/apache/
RUN mkdir /usr/local/apache2/sites-available/
RUN mkdir /usr/local/apache2/sites-enabled/
# END SETUP ENV

# BEGIN FILE LOAD
COPY ./dist/<PROJECT>/ /usr/local/apache2/htdocs/
# END FILE LOAD

# BEGIN VHOST CONFIG
COPY ./vhosts /usr/local/apache2/sites-available/
RUN ln -s /usr/local/apache2/sites-available/* /usr/local/apache2/sites-enabled/
# END VHOST CONFIG

# BEGIN SERVER CONFIG
RUN echo "LoadModule rewrite_module modules/mod_rewrite.so" >> /usr/local/apache2/conf/httpd.conf
RUN echo "ServerName localhost" >> /usr/local/apache2/conf/httpd.conf
RUN echo "IncludeOptional sites-enabled/*.conf" >> /usr/local/apache2/conf/httpd.conf
RUN sed -i "s/AllowOverride None/AllowOverride All/g" /usr/local/apache2/conf/httpd.conf
# END SERVER CONFIG

# BEGIN REVERSE PROXY SERVER
RUN echo "LoadModule proxy_module modules/mod_proxy.so" >> conf/httpd.conf
RUN echo "LoadModule proxy_http_module modules/mod_proxy_http.so" >> conf/httpd.conf
RUN echo "LoadModule ssl_module modules/mod_ssl.so" >> conf/httpd.conf
# BEGIN REVERSE PROXY SERVER

# BEGIN GZIP SERVER
RUN echo "LoadModule deflate_module modules/mod_deflate.so" >> conf/httpd.conf
RUN echo "<IfModule mod_deflate.c>" >> conf/httpd.conf
RUN echo "SetOutputFilter DEFLATE" >> conf/httpd.conf
RUN echo "SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary" >> conf/httpd.conf
RUN echo "SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary" >> conf/httpd.conf
RUN echo "<IfModule mod_headers.c>" >> conf/httpd.conf
RUN echo "Header append Vary User-Agent" >> conf/httpd.conf
RUN echo "</IfModule>" >> conf/httpd.conf
RUN echo "</IfModule> " >> conf/httpd.conf
# END GZIP SERVER

RUN apachectl restart
EXPOSE 80

Dockerfile

The basic Dockerfile structure