首页 > 编程语言 >docker实战: vue+java+uniapp部署到阿里云服务器详解(此文没有使用宝塔面板部署),附带各种坑处理

docker实战: vue+java+uniapp部署到阿里云服务器详解(此文没有使用宝塔面板部署),附带各种坑处理

时间:2023-01-08 17:35:17浏览次数:63  
标签:uniapp vue java log index 部署 server html crmeb

一、部署前准备工具以及注意事项:

官方部署文档:https://doc.crmeb.com/java/crmeb_java

1.ide:idea|vs code|web storm,uniapp:HBuilder X

2.注意事项如下:

java项目配置注意事项: ide使用idea

jdbc配置:

image

修改pom文件jdbc版本配置:

image

打包

image

编译警告去除

sun.misc.BASE64Decoder是内部专用 API, 可能会在未来发行版中删除: https://blog.csdn.net/weixin_42096792/article/details/122184709
pom文件警告: 检查同一个包是否存在多个版本的dependens

前端项目:ide可使用vs-code或者web-storm以及idea

image

线上配置

image

uniapp项目:ide使用HBuilder X

操作参考官方文档即可: https://doc.crmeb.com/java/crmeb_java/2221

二、部署java环境

1.依赖:docker、nginx、mysql5.7或者mysql8(我使用的mysql8)、redis

开始部署java服务

1.上传打包后的jar文件(文件在服务的target目录下)到服务器目录,例如:/www/wwwroot/crmeb_java

image

2.编写DockerFile文件:

image

3.打包docker image:

docker build -f DockerFile_crmeb_admin -t crmeb_admin .
参数说明: -f 指定dockerfile文件所在目录,默认为DockerFile,这里指的是当前目录下的DockerFile_crmeb_admin文件;-t :指定镜像名称,最后一个参数: .镜像存在目录,这个一般情况下默认为.就好(具体说明:https://www.dztcy.com/19565.html)

4.另外一个crmeb_front的操作与上面的操作都是一个原理,这里不做重复阐述:

image

5.运行容器

crmeb_admin: docker run -it -d --name crmeb_admin -p 8080:8080 -v /www/wwwroot/crmeb_java/crmeb_log:/crmeb_log -v /www/wwwroot/crmeb_java/crmebimage:/media/crmebimage crmeb_admin /bin/bash
crmeb_front: docker run -it -d --name crmeb_front -p 8081:8081 -v /www/wwwroot/crmeb_java/crmeb_front_log:/crmeb_front_log crmeb_front /bin/bash
参数说明:
-i:以交互模式运行容器
-t:为容器重新分配一个伪输入终端
-d : detach 表示后台运行
--name:定义容器名称,不可重复
-p: 本机端口与docker端口的映射,前面的本机端口,后面是docker端口
-v: docker与物理机的文件映射,通常用于配置文件的映射(nginx、mysql等使用居多),这里定义主要是为了方便容器可以访问物理机的图片以及log
其他: crmeb_front、crmeb_admin为镜像名称也可以指定id,/bin/bash: 终端类型

三、web环境配置

1.首先安装nginx,这里我使用的版本的1.20.1
2.部署文档:https://www.modb.pro/db/459216
3.我目前的nginx配置以及说明:

#解决nginx访问图片403,权限不足的问题
user root ;
#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  1024;
}


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       80;
        #server_name  47.108.160.76;
        server_name  127.0.0.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/local/nginx/html/dist;
            index  index.html index.htm;
            #proxy_pass   http://127.0.0.1:80;
            #解决直接访问路由404的问题
            try_files $uri $uri/ /index.html;
            #缓存配置,资源有更新时下载,无变化时缓存
            add_header Cache-control no-cache;


        }

        #配置图片服务器
        location /crmebimage/ {
            root  /www/wwwroot/crmeb_java/crmebimage;
            autoindex on ; // 为on可支持访问目录,否则返回403
        }

        #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_pass   http://127.0.0.1:9527;


        }
    }

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

        location / {
            root   /usr/local/nginx/html/h5;
            index  index.html index.htm;
            #解决直接访问路由404的问题
            try_files $uri $uri/ /index.html;
            #缓存配置,资源有更新时下载,无变化时缓存
            add_header Cache-control no-cache;

        }
    }

    # 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;
    #    }
    #}

}

4.遇到的坑以及处理:
java服务启动会文字乱码: 启动服务时加入参数:-Dfile.encoding=utf-8
crmeb不能正常显示图片和问题:
1.crmebimage里面的资源会随着代码更新而发生变化;
2.需要检查配置文件中imagePath的路径是否正确;
3.访问图片以及其他静态资源时需要使用nginx代理;
4.如遇到访问静态资源403:1.nginx.conf文件加上user root;2.如果需要访问目录:加入: autoindex on;3.如果访问的是web项目,检查root对应的目录下是否存在index.html文件

标签:uniapp,vue,java,log,index,部署,server,html,crmeb
From: https://www.cnblogs.com/qtclm/p/17034824.html

相关文章

  • asp.net core 部署到 腾讯云 Web Deploy部署错误
     文章内容来自:  https://www.jianshu.com/p/f7251179e91c     WebDeploy部署错误:未能连接到远程计算机,请确保在远程计算机上安装了WebDeploy并启动了所......
  • vue项目搭建(完整步骤)
    一、安装环境1.安装Node.js下载地址:https://nodejs.org/zh-cn/建议下载长期维护版下载完成后打开,一直下一步最后点击install就好了这里建议不要安装到C盘2.验证Node......
  • vue-cli更改包管理器yarn为npm
    找到路径C:\Users{当前登录的用户名}\下的.vuerc文件打开此文件,修改packageManager的值就可以了如果你想在项目中使用npm包管理工具,就将其值改为"npm"如果你想在项目中......
  • 配置iSCSI部署网络存储
    iSCSI互联网小型计算机系统接口是由IBM下属的两大研发机构AImaden和Haifa研究中心共同开发的,是一个供硬件设备使用的、可在IP协议上层运行的SCSI指令集,是一种开放的基于I......
  • 快速部署Apache服务静态网站
    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速、可靠并且......
  • 13 总结Vue数据监测
    总结Vue数据监测1.Vue会监视data中所有层次的数据。2.如何监测对象中的数据?通过setter实现监视,切要在newVue时,就传入要监测的数据。(1).对象中后追加的属性,Vue默认不做......
  • Vue ESLint Component name should always be multi-word
    意思是建议组件名由多个单词组成,使用About之类的单个单词命名组件可能会报这个提示。Option1:全局关闭//<projectRoot>/.eslintrc.jsmodule.exports={⋮ru......
  • vue 使用echarts
    0.在vue内使用echarts可使用v-echart这个魔改版本,完全是可用的,但不在本次叙述范畴1.首先安装 npminstallecharts--save或者yarnaddecharts2.先上结论 ......
  • vue组件的对象式写法,vue中的h函数
    render:将虚拟dom转为真实domh函数:创建的是vnode,也可以成为createVnode函数语法:h(元素名称,这个元素的数据,子集)第一个参数:可以为一个html标签,一个组件,一个异步组......
  • 解决uni-app使用vuex刷新后数据失效 即数据刷新后消失
    我是前端小白萌新一枚最近在用uniapp写一个app遇到不少坑特此记录一下啦~~一开始我存储数据时用vue中的store在登陆的时候把获取到的个人信息存储在store的仓库里面,然......