2

谁能帮助我们如何部署一个角度温泉应用程序。我们正在使用 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/single-spa-layout@1.0.0-beta.2/dist/system/single-spa-layout.min.js"
    }
  }
</script>

包.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/cli@8.3.26
# 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;"] 
4

0 回答 0