Fontawesome 在构建过程中给出 401 未经授权的错误

Question

几个月来我一直在使用 fontawesome，没有任何问题。今天，每当我尝试将我的应用程序投入生产时，我就开始看到这个错误。

error An unexpected error occurred: "https://npm.fontawesome.com/@fortawesome/fontawesome-pro/-/6.1.1/fontawesome-pro-6.1.1.tgz: Request failed \"401 Unauthorized\"".

我试过运行 yarn install、删除 node_modules、删除 yarn.lock 等，但我仍然收到 401 未授权。我什至卸载并重新安装了所有 fontawesome 软件包。

我使用的是 Yarn，而不是 NPM，所以不确定这是否与它有关。我确实设置了一个 .npmrc 文件，它看起来像：

// .npmrc

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken="my-token"

我还有一个.yarnrc.yml文件

// .yarnrc.yml

npmScopes:
  fortawesome:
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAlwaysAuth: true
    npmAuthToken: "my-token"

这是我的 package.json:

{
  "name": "br-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "storybook": "start-storybook -p 6006 --quiet",
    "build-storybook": "build-storybook",
    "storybook:clean": "rm -rf node_modules/.cache/storybook",
    "json-server": "json-server -p 5000 --host 0.0.0.0 --watch db.json",
    "compile": "tsc --noEmit"
  },
  "dependencies": {
    "@auth0/auth0-react": "^1.3.0",
    "@fortawesome/fontawesome-common-types": "^6.1.1",
    "@fortawesome/fontawesome-pro": "^6.1.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@joeattardi/emoji-button": "^4.6.0",
    "@stripe/react-stripe-js": "^1.4.1",
    "@stripe/stripe-js": "^1.15.2",
    "@tailwindcss/forms": "^0.4.0",
    "@typeform/embed": "^1.2.0",
    "@types/auth0-js": "^9.14.2",
    "@types/lodash-es": "^4.17.4",
    "@types/react-dom": "^17.0.0",
    "@types/react-modal": "^3.12.0",
    "algoliasearch": "^4.9.3",
    "auth0-js": "^9.19.0",
    "axios": "^0.21.1",
    "classnames": "^2.2.6",
    "date-fns": "^2.16.1",
    "firebase": "^8.2.4",
    "lodash-es": "^4.17.20",
    "next": "10.0.5",
    "next-transpile-modules": "^6.0.0",
    "qs": "^6.9.6",
    "rc-slider": "^9.7.1",
    "rc-switch": "^3.2.2",
    "react": "17.0.1",
    "react-datepicker": "^3.4.1",
    "react-dom": "17.0.1",
    "react-easy-crop": "^3.3.2",
    "react-functional-select": "^2.9.5",
    "react-ga": "^3.3.0",
    "react-helmet": "^6.1.0",
    "react-hotjar": "^5.0.0",
    "react-modal": "^3.12.1",
    "react-player": "^2.9.0",
    "react-query": "^3.5.16",
    "react-typeform-embed": "^0.2.1",
    "react-window": "^1.8.6",
    "recoil": "^0.1.2",
    "sharp": "^0.30.3",
    "styled-components": "^5.2.1",
    "styled-jsx-plugin-postcss": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@next/bundle-analyzer": "^10.0.5",
    "@storybook/addon-actions": "^6.1.18",
    "@storybook/addon-essentials": "^6.1.18",
    "@storybook/addon-links": "^6.1.18",
    "@storybook/react": "^6.1.18",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.3",
    "@types/node": "^14.14.20",
    "@types/react": "^17.0.0",
    "@types/react-datepicker": "^3.1.7",
    "autoprefixer": "^10.4.4",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "husky": "^5.1.3",
    "import-sort-style-module": "^6.0.0",
    "jest": "^26.6.3",
    "json-server": "^0.16.3",
    "lint-staged": ">=10",
    "postcss": "^8.4.12",
    "prettier": "^2.2.1",
    "prettier-plugin-import-sort": "^0.0.6",
    "tailwindcss": "^3.0.23",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "typescript": "^4.1.3"
  },
  "importSort": {
    ".js, .jsx, .ts, .tsx": {
      "style": "module",
      "parser": "typescript"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "tsc --noEmit"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,scss,md,json}": "prettier --write"
  }
}

Answer 1

回答我自己的问题。问题最终出在我的 docker 文件上。根据 fontawesome 安装说明，您需要在终端中运行这两个命令：

npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" "your token here"

但是，如果您使用 docker，则需要将这两个命令添加到您的 docker 文件中：

RUN npm config set "@fortawesome:registry" https://npm.fontawesome.com/
RUN npm config set "//npm.fontawesome.com/:_authToken" "your token here"

这样，配置会在您部署时设置。

所以我的整个 docker 文件现在看起来像...

FROM node:14-alpine

WORKDIR /usr/src/app
RUN npm config set "@fortawesome:registry" https://npm.fontawesome.com/
RUN npm config set "//npm.fontawesome.com/:_authToken" "my token"
COPY package*.json ./
COPY yarn.lock ./
RUN yarn install

COPY . .

RUN yarn build

EXPOSE 3000

CMD [ "yarn", "start" ]

Fontawesome 在构建过程中给出 401 未经授权的错误

Fontawesome giving 401 unauthorized error during build process

npm

font-awesome

yarnpkg

react-font-awesome