Héberger une application React avec des pages Gitlab sur le domaine racine

Question

J'ai une application React, et je veux la déployer sur des pages Gitlab.

où j'ai pu le déployer avec succès : https://company.gitlab.com/projectname

mais je ne parviens pas à le déployer sur : https://company.gitlab.com/ j'obtiens toujours un 404

Voici ma configuration :

.gitlab_ci.yml

# Using the node alpine image to build the React app
image: node:alpine

# Announce the URL as per CRA docs
# https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration
variables:
  PUBLIC_URL: /
# Cache node modules - speeds up future builds
cache:
  paths:
  - node_modules

# Name the stages involved in the pipeline
stages:
- deploy

# Job name for gitlab to recognise this results in assets for Gitlab Pages
# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements
pages:
  stage: deploy
  script:
    - npm install # Install all dependencies
    - npm run build --prod # Build for prod
    - cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46
    - mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
    - mv build public # Move build files to public dir for Gitlab Pages
  artifacts:
    paths:
    - public # The built files for Gitlab Pages to serve
  only:
    - master # Only run on master branch

Dans App.js, j'ai ajouté basename={process.env.PUBLIC_URL}

import React, {Component} from "react";
import {BrowserRouter, Switch, Route} from "react-router-dom";
import browserHistory from "react-dom";
import "./App.css";
import {HomeLayoutFr, HomeLayoutEn, MentionsLayout} from "./layout.js";
const supportsHistory = "pushState" in window.history;
export default class App extends Component {
    render() {
        return (
            <BrowserRouter basename={process.env.PUBLIC_URL} forceRefresh={!supportsHistory}>
                <div className="main">
                    <Switch>
                        <Route history={browserHistory} path="/mentions">
                            <MentionsLayout />
                        </Route>
                        <Route history={browserHistory} path="/en">
                            <HomeLayoutEn />
                        </Route>
                        <Route history={browserHistory} exact path="/">
                            <HomeLayoutFr />
                        </Route>
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }
}

Lorsque j'utilise un /projet à la fin de l'url, j'ai dû ajouter :

variables:
  PUBLIC_URL: /projectname

sur .gitlab_ci.yml

Je devais aussi ajouter :

"homepage": "https://company.gitlab.io/projectname",

sur package.json

Une idée sur la façon de sortir de l'erreur 404 ? ??

Answer 1

Afin de déployer vers entreprise.gitlab.io le nom de votre projet doit être entreprise.gitlab.io Cela peut sembler peu intuitif, mais il n'y a aucun moyen d'y échapper.

Voir https://docs.gitlab.com/ee/user/project/pages/getting_started_part_one.html#user-and-group-websites