如何在 docker 容器上运行单个 spa 应用程序

问题描述

任何人都可以帮助我们如何部署有角度的 spa 应用程序。我们正在使用 dockerfile 进行部署。当我对它进行 dockerize 时，该应用程序已成功构建和部署，但是当我尝试点击 main.js url 时出现以下错误

Access to script at 'http://localhost:8080/main-es5.js' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

VM214154 system.min.js:4 GET http://localhost:8080/main-es5.js net::ERR_FAILED
VM214152 zone.js:209 Uncaught Error: Error loading http://localhost:8080/main-es5.js
    at HTMLScriptElement.<anonymous> (VM211627 system.min.js:4)
    at ZoneDelegate.invokeTask (VM211625 zone.js:434)
    at Zone.runTask (VM211625 zone.js:205)
    at ZoneTask.invokeTask [as invoke] (VM211625 zone.js:516)
    at invokeTask (VM211625 zone.js:1656)
    at HTMLScriptElement.globalZoneAwareCallback (VM211625 zone.js:1682)

我的根配置的 index.html

<script type="systemjs-importmap">
  {
    "imports": {
      "app1": "http://localhost:8080/main-es5.js","app2": "http://localhost:4202/main.js","login": "http://localhost:4204/main.js","nav-bar": "http://localhost:4300/main.js","sldb-app": "http://localhost:4205/main.js","single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js","single-spa-layout": "https://unpkg.com/[email protected]/dist/system/single-spa-layout.min.js"
    }
  }
</script>

package.json

{
    "name": "app1","version": "0.0.0","scripts": {
    "ng": "ng","start": "npm run serve:single-spa","build": "npm run build:single-spa","test": "ng test","lint": "ng lint","e2e": "ng e2e","build:single-spa": "ng build --prod --deploy-url /dist/app1 --output-hashing none","serve:single-spa": "ng serve --disable-host-check --port 4201 --deploy-url http://localhost:4201/ --live-reload false"
}

Dockerfile：

# ----- BUILD -----
# Base image used for build node js apps
FROM node:12.2.0-alpine AS build
# Set our working directory
WORKDIR /app
# Copy package manifest (we do this in order to cache dependencies)
COPY ./package.json .
# Install dependencies
RUN npm i
RUN npm install -g @angular/[email protected]
# Copy our application files
COPY . .
# Build a static version of our angular app
RUN ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path
# ----- SERVE -----
# We'll use an nginx base to host our built static assets 
FROM nginx

# Copy our minimal custom configuration
#COPY nginx.conf /etc/nginx/nginx.conf

# Copy our static assets from our build container
COPY --from=build /app/dist/app1 /usr/share/nginx/html

# support running as arbitrary user which belogs to the root group
RUN chmod g+rwx /var/cache/nginx /var/run /var/log/nginx

# 80 is a priviliged port
# users are not allowed to listen on priviliged ports
RUN sed -i.bak 's/listen\(.*\)80;/listen 8080;/' /etc/nginx/conf.d/default.conf

EXPOSE 8080

# remove the user directive
# comment user directive as master process is run as user in OpenShift anyhow
RUN sed -i.bak 's/^user/#user/' /etc/nginx/nginx.conf

#EXPOSE 8081
CMD ["nginx","-g","daemon off;"] 

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）