Unverified Commit 255235a1 authored by Julien Bouquillon's avatar Julien Bouquillon 🐫 Committed by GitHub
Browse files

feat(nginx): enable custom 404.html (#854)

* feat(nginx): enable custom 404.html

* missing fixture

* test

* test

* test

* feat: add SocialGouv 404

* fix test

* fix test

* missing

* missing

* missing

* Update nginx.conf
parent ceba9237
<html>
<head>
<meta charset="UTF-8" />
<title>Page non trouvée</title>
<script src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>
<style>
/* CSS from https://codepen.io/cluzier/pen/BOZmMp */
html,
body {
height: 100%;
overflow: hidden;
background: #f7f7f7;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.error-page {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
margin-top: -10vh;
}
.error-page h1 {
font-size: 20vh;
font-weight: bold;
position: relative;
padding: 0;
margin-bottom: 2vh;
}
.error-page h1:after {
content: attr(data-h1);
position: absolute;
top: 0;
left: 0;
right: 0;
color: transparent;
/* webkit only for graceful degradation to IE */
background: -webkit-repeating-linear-gradient(
-45deg,
#71b7e6,
#69a6ce,
#b98acc,
#ee8176,
#b98acc,
#69a6ce,
#9b59b6
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
animation: animateTextBackground 10s ease-in-out infinite;
}
.error-page h1 + p {
margin-top: 1vh;
color: #606060;
font-size: 5vh;
font-weight: bold;
line-height: 10vh;
position: relative;
}
.error-page h1 + p:after {
content: attr(data-p);
position: absolute;
top: 0;
left: 0;
right: 0;
color: transparent;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
.message {
color: #226087;
padding: 0 4em;
}
footer {
width: 100%;
position: fixed;
bottom: 0;
background: #efefef;
text-align: center;
height: 40px;
line-height: 40px;
color: #666;
}
footer a {
color: #666;
}
@media only screen and (max-width: 600px) {
.error-page h1 {
font-size: 3em !important;
}
.error-page h1 + p {
font-size: 2em;
line-height: 10vw;
}
}
@keyframes animateTextBackground {
0% {
background-position: 0 0;
}
25% {
background-position: 100% 0;
}
50% {
background-position: 100% 100%;
}
75% {
background-position: 0 100%;
}
100% {
background-position: 0 0;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="error-page">
<div>
<h1 data-h1="404">404</h1>
<p data-p="Page non trouvée">Page non trouvée</p>
<p>&nbsp;</p>
<p class="message">
Nos équipes ont été notifiées et interviendront dans les meilleurs
délais.
</p>
</div>
</div>
<footer>
Fabrique numérique des Ministères Sociaux -
<a href="mailto:DSI-incubateur@sg.social.gouv.fr"
>DSI-incubateur@sg.social.gouv.fr</a
>
</footer>
<script>
(function () {
var hostname = document.location.hostname;
var dsn =
"https://7b80ba66958845f4b44790ffc7191638@sentry.fabrique.social.gouv.fr/28";
var FABRIQUE_DOMAIN = ".fabrique.social.gouv.fr";
var DEV_FABRIQUE_DOMAIN = ".dev.fabrique.social.gouv.fr";
var environment =
//
// The `//*.dev.fabrique.social.gouv.fr` case
(hostname.indexOf(DEV_FABRIQUE_DOMAIN) > 0 && DEV_FABRIQUE_DOMAIN) ||
//
// The `//*.fabrique.social.gouv.fr` case
(hostname.indexOf(FABRIQUE_DOMAIN) > 0 && FABRIQUE_DOMAIN) ||
//
// The `//fabrique.social.gouv.fr` case
(hostname === FABRIQUE_DOMAIN.slice(1) && FABRIQUE_DOMAIN) ||
//
// Other domains
hostname;
Sentry.init({
dsn: dsn,
environment: environment,
});
if (environment === FABRIQUE_DOMAIN) {
var project =
// The `//fabrique.social.gouv.fr` case
(hostname === FABRIQUE_DOMAIN.slice(1) && "www") ||
//
// The `//<project>.fabrique.social.gouv.fr` case
hostname.slice(0, hostname.indexOf(FABRIQUE_DOMAIN));
Sentry.setTag("project", project);
}
Sentry.captureException(new Error(hostname));
})();
</script>
</body>
</html>
......@@ -3,5 +3,6 @@ FROM nginx:1.21-alpine
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY ./entrypoint.sh /entrypoint.sh
COPY ./envsub.sh /envsub.sh
COPY ./404.html /usr/share/nginx/errors/
ENTRYPOINT ["/entrypoint.sh"]
......@@ -39,7 +39,17 @@ http {
client_max_body_size 32m;
error_page 500 502 503 504 /50x.html;
error_page 404 /404.html;
recursive_error_pages on;
location ~* ^/404\.html$ {
error_page 404 = @error404;
}
location @error404 {
root /usr/share/nginx/errors/;
}
location /50x.html {
root /var/lib/nginx/html;
}
......
......@@ -3,14 +3,25 @@
load '../../.bats/common.bats.bash'
setup_file() {
docker-compose up -d alpine
docker-compose run \
--detach \
--publish 8888:80 \
--rm \
--volume ${BATS_TEST_DIRNAME}/fixtures:/usr/share/nginx/html \
alpine
}
teardown_file() {
docker-compose stop
docker-compose rm -sf
}
@test "nginx: should return 404 (not a SPA)" {
@test "nginx: should return status 404 (not a SPA)" {
run wget --server-response --quiet http://localhost:8888/pouet
assert_output --partial "HTTP/1.1 404 Not Found"
}
@test "nginx: should return custom 404 page (not a SPA)" {
run wget --content-on-error --output-document - http://localhost:8888/pouet
assert_output --partial "CUSTOM 404 PAGE"
}
#!/usr/bin/env bats
load '../../.bats/common.bats.bash'
setup_file() {
docker-compose run \
--detach \
--publish 8888:80 \
--rm \
--volume ${BATS_TEST_DIRNAME}/fixtures-simple:/usr/share/nginx/html \
alpine
}
teardown_file() {
docker-compose rm -sf
}
@test "nginx: should return default SocialGouv 404 page (not a SPA)" {
run wget --content-on-error --output-document - http://localhost:8888/pouet
assert_output --partial "Page non trouvée"
}
nginx/test/index.html with VERSION=%%VERSION%%
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment