reactjs - 在根域上托管带有 Gitlab 页面的 React 应用程序

Question

我有一个 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 时，我必须添加:

variables:
  PUBLIC_URL: /projectname

在.gitlab_ci.yml

我还必须添加:

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

在package.json

中

知道如何摆脱 404 错误吗？？？

Answer 1

为了部署到 company.gitlab.io，您的项目名称实际上必须是 company.gitlab.io这可能感觉不直观，但没有办法解决它。

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