如何将Angular + Springboot项目部署到heroku

时间:2018-02-09 17:46:48

标签: maven spring-boot heroku web-deployment

我是网络开发的新手,我已经扫描了大部分关于此的问题,但我的情况有所不同。 Here is my project structure

我将前端文件夹放在项目根文件夹中,所以当我构建Spring项目时,我使用maven构建Angular项目并将其移动到target/classes/static

这是我的maven插件

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.6</version>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <nodeVersion>v9.5.0</nodeVersion>

                            <npmVersion>5.6.0</npmVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm run-script build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
                <configuration>
                    <workingDirectory>${basedir}/angular-client</workingDirectory>
                </configuration>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy-resources</id>
                        <phase>validate</phase>
                        <goals><goal>copy-resources</goal></goals>
                        <configuration>
                            <outputDirectory>${basedir}/target/classes/static/</outputDirectory >
                            <resources>
                                <resource>
                                    <directory>${basedir}/angular-client/dist</directory >
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

这可以在我当地的笔记本电脑上使用。

    [

INFO] Scanning for projects...
        [INFO] 
        [INFO] ------------------------------------------------------------------------
        [INFO] Building spring-angular4 0.0.1-SNAPSHOT
        [INFO] ------------------------------------------------------------------------
        [INFO] 
        [INFO] >>> spring-boot-maven-plugin:1.5.10.RELEASE:run (default-cli) > test-compile @ spring-angular4 >>>
        [INFO] 
        [INFO] --- maven-resources-plugin:2.6:copy-resources (copy-resources) @ spring-angular4 ---
        [INFO] Using 'UTF-8' encoding to copy filtered resources.
        [INFO] Copying 7 resources
        [INFO] 
        [INFO] --- frontend-maven-plugin:1.6:install-node-and-npm (install node and npm) @ spring-angular4 ---
        [INFO] Node v9.5.0 is already installed.
        [INFO] NPM 5.6.0 is already installed.
        [INFO] 
        [INFO] --- frontend-maven-plugin:1.6:npm (npm install) @ spring-angular4 ---
        [INFO] Running 'npm install' in /Users/tingyugu/Desktop/test/spring-angular4/angular-client
        [INFO] up to date in 10.183s
        [INFO] 
        [INFO] --- frontend-maven-plugin:1.6:npm (npm run-script build) @ spring-angular4 ---
        [INFO] Running 'npm run build' in /Users/tingyugu/Desktop/test/spring-angular4/angular-client
        [INFO] 
        [INFO] > angular-client@0.0.0 build /Users/tingyugu/Desktop/test/spring-angular4/angular-client
        [INFO] > ng build --prod
        [INFO] 
        [INFO] Date: 2018-02-09T17:42:29.707Z
        [INFO] Hash: e3ae517dae714ceb6276
        [INFO] Time: 21657ms
        [INFO] chunk {0} polyfills.f20484b2fa4642e0dca8.bundle.js (polyfills) 59.4 kB [initial] [rendered]
        [INFO] chunk {1} main.83dbbe868aaf28369eae.bundle.js (main) 152 kB [initial] [rendered]
        [INFO] chunk {2} styles.9c0ad738f18adc3d19ed.bundle.css (styles) 79 bytes [initial] [rendered]
        [INFO] chunk {3} inline.73203cbab5522a17c017.bundle.js (inline) 1.45 kB [entry] [rendered]
        [INFO] 
        [INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ spring-angular4 ---
        [INFO] Using 'UTF-8' encoding to copy filtered resources.
        [INFO] Copying 1 resource
        [INFO] Copying 0 resource
        [INFO] 
        [INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ spring-angular4 ---
        [INFO] Nothing to compile - all classes are up to date

现在我想将项目部署到heroku,它给了我错误

remote:        [INFO] --- frontend-maven-plugin:1.6:npm (npm install) @ spring-angular4 ---
remote:        [INFO] Running 'npm install' in /tmp/build_9d47c61eca7fea7b7c973f2a0ae33b98/angular-client
remote:        [WARNING] npm WARN saveError ENOENT: no such file or directory, open '/tmp/build_9d47c61eca7fea7b7c973f2a0ae33b98/angular-client/package.json'
remote:        [ERROR] npm notice created a lockfile as package-lock.json. You should commit this file.
remote:        [WARNING] npm WARN enoent ENOENT: no such file or directory, open '/tmp/build_9d47c61eca7fea7b7c973f2a0ae33b98/angular-client/package.json'
remote:        [INFO] up to date in 0.069s
remote:        [WARNING] npm WARN angular-client No description
remote:        [WARNING] npm WARN angular-client No repository field.
remote:        [WARNING] npm WARN angular-client No README data
remote:        [WARNING] npm WARN angular-client No license field.
remote:        [ERROR] 
remote:        [INFO] 
remote:        [INFO] --- frontend-maven-plugin:1.6:npm (npm run-script build) @ spring-angular4 ---
remote:        [INFO] Running 'npm run build' in /tmp/build_9d47c61eca7fea7b7c973f2a0ae33b98/angular-client
remote:        [ERROR] npm ERR! path /tmp/build_9d47c61eca7fea7b7c973f2a0ae33b98/angular-client/package.json
remote:        [ERROR] npm ERR! code ENOENT
remote:        [ERROR] npm ERR! errno -2
remote:        [ERROR] npm ERR! syscall open
remote:        [ERROR] npm ERR! enoent ENOENT: no such file or directory, open '/tmp/build_9d47c61eca7fea7b7c973f2a0ae33b98/angular-client/package.json'
remote:        [ERROR] npm ERR! enoent This is related to npm not being able to find a file.
remote:        [ERROR] npm ERR! enoent 
remote:        [ERROR] 
remote:        [ERROR] npm ERR! A complete log of this run can be found in:
remote:        [ERROR] npm ERR!     /app/.npm/_logs/2018-02-09T17_37_34_200Z-debug.log
remote:        [INFO] ------------------------------------------------------------------------
remote:        [INFO] BUILD FAILURE
remote:        [INFO] ------------------------------------------------------------------------
remote:        [INFO] Total time: 7.063 s
remote:        [INFO] Finished at: 2018-02-09T17:37:34Z
remote:        [INFO] Final Memory: 26M/372M

我知道原因是当heroku构建项目时路径会改变,但是如何解决这个问题,并且有些人会告诉我一些关于heroku构建项目时会发生什么的事情?

1 个答案:

答案 0 :(得分:0)

好的,我发现原因是,angular-client是项目的子模块,我从.git和git push项目中删除子模块配置,它可以工作。