У меня есть приложение React, и я хочу развернуть его на страницах Gitlab.
Я могу успешно развернуть его на: https://company.gitlab.com/projectname
, но я не могу развернуть его на:https://company.gitlab.com/, я всегда получаю 404
Вот моя конфигурация:
.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
В App.js я добавил 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>
);
}
}
Когда я использую / project в конце URL, я должен был добавить:
variables:
PUBLIC_URL: /projectname
в .gitlab_ci.yml
Я также должен был добавить:
"homepage": "https://company.gitlab.io/projectname",
в package.json
Есть идеи, как выйти из ошибки 404 ???