ReactJS + SpringMVC整合Java利用Docker部署
来源:互联网 发布:远程登陆阿里云服务器 编辑:程序博客网 时间:2024/06/08 05:13
React JS has been a more and more popular front framework these days. Thus, I have decided to use React JS as front framework to help me with my project.
1. Thinking
The front part I decided to use ReactJS and single page applicaion by react-router. And I have no basis of any React js at all. So I will start from the basic.
And the back server I want to use RESTful style. Use all interface to make it as API for my front side. And I am going to use MAVEN to help build my project. Spring + spring MVC to deal with the back side.
2. React framework
https://reactjs.org/
This website has given us a good tutorial on how to use react. And we don’t have to learn to use and configure the complex webpack.
Now we all use create-react-app this tool to create react app.
https://github.com/facebookincubator/create-react-app
Just run
npm install -g create-react-appcreate-react-app my-appcd my-app/npm start
And after creating the app, we will see the directory like this
my-app├── README.md├── node_modules├── package.json├── .gitignore├── public│ └── favicon.ico│ └── index.html│ └── manifest.json└── src └── App.css └── App.js └── App.test.js └── index.css └── index.js └── logo.svg └── registerServiceWorker.js
Just run npm build. We can get all the js and css we needed into a single file and a index.html to create our front page resources.
3. Java back Side
create Maven webapp project using IDEA
The pom.xml is like
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.successfactors</groupId> <artifactId>classexceptionanalyze</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>classexceptionanalyze Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.10</version> <scope>test</scope> </dependency> <!-- Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>4.0.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>4.0.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>4.0.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.0.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>4.0.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.0.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>4.0.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>4.0.3.RELEASE</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.1</version> <!-- makesure correct version here --> </dependency> <!-- json数据 --> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-asl</artifactId> <version>1.9.13</version> </dependency> <!-- https://mvnrepository.com/artifact/javax.servlet/servlet-api --> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <!-- hibernate --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>4.3.8.Final</version> </dependency> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1.2</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.34</version> </dependency> <dependency> <groupId>com.squareup.okhttp3</groupId> <artifactId>okhttp</artifactId> <version>3.3.0</version> </dependency> <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson --> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.0</version> </dependency> <!-- https://mvnrepository.com/artifact/log4j/log4j --> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>1.2.17</version> </dependency> </dependencies> <build> <finalName>classexceptionanalyze</finalName> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <configuration> <source>1.6</source> <target>1.6</target> </configuration> </plugin> </plugins> </build></project>
How to add the React Part into the maven project and deploy it into docker and tomcat.
For docker:
1. create docker-compose.yml
version: '2'services: web: image: tomcat:latest ports: - "8080:8080" volumes: - ./target/classexceptionanalyze.war:/usr/local/tomcat/webapps/ROOT.war - ./target/classexceptionanalyze:/usr/local/tomcat/webapps/ROOT expose: - 8080
This helps you to map 8080 from docker to your local environment.
And we use tomcat to deploy our webapp. Then the volumes means that we map this war to the tomcat inside the docker and named it ROOT.war. The second one is exactly same with the first. By this script, we can use docker-compose to start deploy our application here.
- mv front content into your Java back environment
This helps you to combine your front content and back content together so that you can update it easily.
- build your start script
This is the startup.sh
cd my-appnpm run buildcd ..mkdir -p ~/WEB-INFmv src/main/webapp/WEB-INF/* ~/WEB-INFrm -r src/main/webappmkdir src/main/webappmv ~/WEB-INF src/main/webappmv my-app/build/* ~/WEB-INF src/main/webappmvn clean install -DskipTestsdocker-compose up
By one commend you can start your allication easily now.
From build React resources and maven build your project and deploy your project into the server.
sh startup.sh
That’s all we need to build a Spring and React Maven project.
- ReactJS + SpringMVC整合Java利用Docker部署
- 利用docker部署mysql数据库
- JAVA Web 项目开发笔记 ----- springMVC, maven,reactJs
- JAVA Web 项目开发笔记(2) ----- springMVC, maven,reactJs
- 【Java】SpringMVC整合Quartz
- 利用docker来部署web应用
- 利用docker部署wooyun的web应用
- Docker实践,利用DaoCloud来部署应用
- Docker -- 2 -- 利用docker部署网站和数据库
- docker dockerfile 部署java web
- 利用highStock生成报表(SpringMVC整合)
- 【Java】SpringMVC整合Shiro记录
- Vue(使用webpack)与java后端(使用springmvc与tomcat8)整合测试与部署方案
- idea 部署spring springMVC 与mybatis的整合
- Docker使用之Java web应用部署
- Docker: 利用Linux容器实现可移植的应用部署
- 转载_初创公司利用Docker持续集成部署
- 利用docker部署esp8266、nodemcu、wemos d1的开发环境
- SJTU OJ 1012. 增长率问题
- List对象利用属性进行排序的通用工具类
- 漫步最优化三十九——Fletcher-Reeves法
- CCF排队问题
- 使用Softmax回归模型训练识别MNIST数据
- ReactJS + SpringMVC整合Java利用Docker部署
- va_start和va_end使用详解
- 判断学生成绩是否有效
- Springmvc spring xml文件配置问题
- 使用枚举类型的好处
- hello vue!
- iOS Xcode~preferences(首选项)设置控制台背景和字体
- Button实现边界隐藏
- 配置opencv3.3+vs2017