云服务器部署docker ，部署springboot+vue前后端分离项目

云服务器部署docker ，部署springboot+vue前后端分离项目

一、购买云服务器

买一台腾讯云/阿里云云服务器

二、云服务器配置环境

1.配置远程连接

选择系统

配置好远程连接密码

下载Xshell和Xftp 测试远程连接

对应下载免费版的地址：https://www.xshell.com/zh/free-for-home-school/

云服务器配置开放端口

2.安装docker

1.更新yum命令

yum -y update

2.查看机器有残留的docker服务

查看已经安装的docker

yum list installed | grep docker

[root@iZ2vchn8sk983jcslvp36fZ ~]# yum list installed | grep docker
containerd.io.x86_64                 1.3.7-3.1.el8                           @docker-ce-stable
docker-ce.x86_64                     3:19.03.13-3.el8                        @docker-ce-stable
docker-ce-cli.x86_64                 1:19.03.13-3.el8                        @docker-ce-stable

依次删除

yum -y remove containerd.io.x86_64 docker-ce.x86_64 docker-ce-cli.x86_64

安装依赖

yum install -y yum-utils  device-mapper-persistent-data  lvm2
 
yum-config-manager  --add-repo   https://download.docker.com/linux/centos/docker-ce.repo

安装服务

 yum install docker-ce docker-ce-cli containerd.io

查看版本

docker version

设置开机自动启动

systemctl enable docker.service

启动docker

sudo service docker start

查看docker 运行所有的容器

docker ps -a

3.docker 安装redis

docker 查询redis 镜像

docker search redis

docker 拉取redis 镜像

docker pull redis

宿主机配置配置文件

官网下载配置文件redis中文官方网站：http://www.redis.cn/download.html

解压修改redis.conf

bind 127.0.0.1 #注释掉这部分，使redis可以外部访问

云服务器创建文件夹，把redis.conf拖到conf文件夹

启动容器，容器内部配置文件映射到刚刚创建的文件夹

truedei@truedei:~$ sudo docker run -p 6379:6379 --name redis -v /data/redis/redis.conf:/etc/redis/redis.conf  -v /data/redis/data:/data -d redis redis-server /etc/redis/redis.conf --appendonly yes

参数

-p 6379:6379`:把容器内的6379端口映射到宿主机6379端口

`-v /data/redis/redis.conf:/etc/redis/redis.conf`：把宿主机配置好的redis.conf放到容器内的这个位置中

`-v /data/redis/data:/data`：把redis持久化的数据在宿主机内显示，做数据备份

`redis-server /etc/redis/redis.conf`：这个是关键配置，让redis不是无配置启动，而是按照这个redis.conf的配置启动

`–appendonly yes`：redis启动后数据持久化

**注意：**运行命令注意是当前文件

4.安装jdk8

创建/home/software文件夹

安装好xshell与xftp并连接centos

jdk官网https://www.oracle.com/java/technologies/downloads/#java8

下载

上传/home/software

解压缩

tar -zxvf jdk-8u371-linux-x64.tar.gz 

重命名

mv jdk1.8.0_371 jdk8

添加环境变量

vim /etc/profile
文件底部添加内容
#set Java environment
export JAVA_HOME=/home/software/jdk8
export JRE_HOME=/home/software/jdk8/jre
export CLASS_PATH=.:$JAVA_HOME/lib:$JRE_HOME/lib
export PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin

文件立即生效

source /etc/profile

测试安装成功

java -version

4.安装Mysql

这里用的另外服务器数据库，大家就百度安装了

三、运行项目

运行后端

docker 运行jar 包

1.项目后端打成jar包

2.xftp 拖到文件夹

3.docker 运行jar包

jar 包同目录下创建DockerFile

touch Dockerfile

Dockerfile 文件内容

vim 编辑DockerFile

FROM openjdk:8
ADD exam.jar exam.jar
CMD java -jar exam.jar

基于openjdk:8镜像

将本地exam.jar 重命名exam.jar

java -jar 运行

打包

docker build -f ./Dockerfile -t exam:1.0 .

将当前文件下的Dockerfile文件打成exam:1.0 镜像

运行

docker run -d --name exam -p 8080:8080 exam:1.0

将镜像运行为容器：容器名为exam

本地环境运行jar 包

创建文件夹，上传打包好的jar 包，Java -jar 包名运行

运行前端

安装nginx

一般安装在usr/local

进入

cd /usr/local

联网下载

curl -O http://nginx.org/download/nginx-1.22.1.tar.gz

解压

tar -zxvf nginx-1.22.1.tar.gz

安装环境

yum install gcc-c++

安装pcre pcre-devel

#PCRE(Perl Compatible Regular Expressions) 是一个 Perl 库，包括 perl 兼容的正则表达式库。nginx 依赖 PCRE 库。

yum install -y pcre pcre-devel

安装zlib

#zlib 适用于数据压缩的函式库，由 Jean-loup Gailly （负责 compression）和 Mark Adler （负责 decompression）开发。 nginx 依赖 zlib 库。

yum install -y zlib zlib-devel

安装OpenSSL

#OpenSSL 是一个开放源代码的软件库包，应用程序可以使用这个包来进行安全通信，避免窃听，同时确认另一端连接者的身份。这个包广泛被应用在互联网的网页服务器上。Nginx 也依赖 OpenSSL，需要在 Centos 安装此库。

yum install -y openssl openssl-devel

配置Nginx

cd /usr/local/nginx-1.22.1
./configure

*编译、安装*

make
make install

查找安装路径

whereis nginx

修改默认端口、配置

vi /usr/local/nginx/conf/nginx.conf

允许跨域，在server内添加以下配置

# 允许所有来源的跨域请求
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

端口建议改成vue 打包好项目的运行端口

设置开机自启

vi /lib/systemd/system/nginx.service

#nginx.service内添加以下内容：

Description=nginx - high performance web server
After=network.target remote-fs.target nss-lookup.target
[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s stop
[Install]
WantedBy=multi-user.target

#使配置生效

systemctl daemon-reload

#设置开机启动

systemctl enable nginx.service

启动、停止Nginx

#启动

/usr/local/nginx/sbin/nginx

#查询nginx进程

ps -ef|grep nginx

#停止nginx

/usr/local/nginx/sbin/nginx -s quit

#强制停止nginx

/usr/local/nginx/sbin/nginx -s stop

#重新加载配置文件

/usr/local/nginx/sbin/nginx -s reload

重启Nginx

/usr/local/nginx/sbin/nginx -s quit
/usr/local/nginx/sbin/nginx 

问Nginx

http://ip:配置端口号/

打包，生成dist文件夹

npm run build:prod

将dist放入nginx下html 文件夹

重新配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  8081;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8081;
        server_name  127.0.0.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		root   html/dist;
        index  index.html index.htm;
        location / {
			try_files $uri $uri/ /index.html;
        }
		#分布式项目中，前端调用后端配置
		location /prod-api/ {
            proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP &remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header REMOTE_HOST $remote_addr;
			proxy_pass http://127.0.0.1:8080/;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

意思是浏览器输入

8081端口就会加载nginx 安装包下 html目录下的 index.html index.htm的文件

下面那些是解决跨域