uniapp 打包发布H5 nginx 访问

第一步:设置manifest.json

源码视图:

第二步:打包

 

 

 

 将编译文件拷贝到服务器tomcat webapps 目录中

 

 

nginx 配置

tomcat 8080 模块化
upstream wedding_api {
      server localhost:8080 fail_timeout=0;
}

    #强制转发至https协议的 域名配置
    server {
        listen 80;
        server_name test.cn  www.test.cn;
        add_header Strict-Transport-Security max-age=15768000;
        return 301 https://$server_name$request_uri;
     }



#####https代理,此域名监听443端口(http默认监听443),以https协议访问#####
server {
        listen 80 default backlog=2048;
        listen 443 ssl;
        server_name  test.cn  www.test.cn;
        # 下面ssl开头的是HTTPS相关的设置
        #ssl on;   #把ssl on;这行去掉,ssl写在443端口后面。这样http和https的链接都可以用
        ssl_certificate  /usr/local/nginx/conf/cert/6573978_test.cn_nginx/6573978_test.cn.pem;
        ssl_certificate_key  /usr/local/nginx/conf/cert/6573978_test.cn_nginx/6573978_test.cn.key;
        ssl_session_timeout  5m;#session有效期,根据需要适当延长
        ssl_session_cache  shared:SSL:10m;
	client_max_body_size 100M;
        # 使用的加解密方式
        ssl_ciphers  ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        # 支持的协议类型
        ssl_protocols   TLSv1 TLSv1.1 TLSv1.2;
        # 优先使用服务端的加解密方式
        ssl_prefer_server_ciphers on;
        location / {
        # 单个服务
            proxy_pass http://wedding_api;
            # 负载均衡
            # proxy_pass http://yourServers/;
	    proxy_read_timeout 150;  # 秒
            proxy_redirect off;
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header  Host  $http_host;
            proxy_set_header  X-NginX-Proxy  true;
            # 启用支持websocket连接
            #proxy_set_header Upgrade $http_upgrade;
	    #proxy_set_header Connection "upgrade";
         }

 	 location /MP_verify_D5cKxzn8fPeR2wgf.txt {
 		 alias /usr/local/nginx/conf/cert/MP_verify_D5cKxzn8fPeR2wgf.txt;
	}

	# 代理静态资源
 	location /files/ {
          	   alias /project/uploadfile/wedding/;
		   try_files $uri $uri/;
		   index index.html index.htm;
        }

    }

 

 

<think>好的,我需要帮助用户了解如何在Linux下使用Nginx部署Uniapp项目。首先,我得回忆一下整个流程,确保每个步骤都正确无误。用户要求细节多点,所以我要尽量详细地解释每个步骤,避免遗漏关键点。 首先,用户可能已经开发好了Uniapp项目,所以第一步应该是打包生成静态文件。Uniapp通常可以打包H5版本,这样会生成dist目录下的文件。我需要确认用户是否知道如何打包,可能需要提醒他们使用HBuilderX或者命令行工具进行打包,比如执行npm run build:prod。 接下来是安装Nginx。用户使用的是Linux系统,可能需要根据不同的发行版给出不同的安装命令。比如,Ubuntu/Debian使用apt,CentOS使用yum。安装完成后,需要启动Nginx并设置开机自启,这部分要确保命令正确,比如systemctl的用法。 然后是配置Nginx。这里需要详细说明配置文件的路径,通常是在/etc/nginx/sites-available/或者/etc/nginx/conf.d/下创建一个新的配置文件。用户可能需要知道如何设置server块,指定root目录为打包后的dist文件夹,设置监听端口,处理路由History模式的问题,比如添加try_files指令。此外,配置SSL证书也是常见需求,可能需要生成或获取证书的路径,并配置监听443端口。 接下来是部署步骤,包括将打包好的文件上传到服务器,可能需要用scp或者rsync命令,用户可能不熟悉这些,需要简单说明。然后检查Nginx配置是否正确,使用nginx -t,再重新加载配置。可能还需要设置文件权限,比如chmod和chown,确保Nginx有权限访问静态文件。 高级配置部分,可能需要提到反向代理,处理API请求转发到后端服务。跨域问题也是一个常见点,如何在Nginx配置中添加头部信息。还有Gzip压缩和缓存策略,这些优化步骤对性能有帮助,用户可能会感兴趣。 最后,常见问题排查,比如检查端口是否开放,防火墙设置,Nginx日志的位置和查看方法,路由配置是否正确,以及文件权限问题。这些都是部署过程中容易遇到的坑,提前说明可以帮助用户节省时间。 整体结构需要清晰,分步骤讲解,每个步骤都给出具体的命令和配置示例。同时要注意使用中文,避免专业术语过多,必要时解释命令的作用,确保用户能理解并跟随操作。需要验证每个步骤的正确性,比如Nginx的配置语法,路径是否正确,避免用户操作时出错。另外,考虑到用户可能需要HTTPS配置,提供申请免费证书的方法,比如Let's Encrypt,或者自签名证书的生成命令,但可能用户已经有证书的话,可以直接使用现有路径。 还要注意Uniapp的路由模式,如果是History模式,必须正确配置Nginx的try_files,否则刷新页面会出现404错误。这一点需要特别强调,避免用户遗漏。 总结下来,需要分步讲解:打包、安装Nginx、配置Nginx、部署、高级配置、问题排查。每个部分详细说明,给出命令示例和配置代码,确保用户能够按步骤操作成功。同时语言要简洁明了,避免冗长,但关键点不能省略,比如权限设置和路由配置,这些容易出错的地方要重点提醒。</think>以下是Linux系统使用Nginx部署Uniapp项目的详细步骤: --- ### 一、项目打包 1. 在Uniapp项目中执行打包命令: ```bash # 通过HBuilderX界面打包 或 npm run build:h5 ``` 2. 生成静态文件目录:`/项目根目录/dist/build/h5` --- ### 二、安装Nginx ```bash # Ubuntu/Debian sudo apt update sudo apt install nginx # CentOS sudo yum install epel-release sudo yum install nginx # 启动并设置开机自启 sudo systemctl start nginx sudo systemctl enable nginx ``` --- ### 三、Nginx配置 1. 创建配置文件: ```bash sudo vim /etc/nginx/conf.d/uni-app.conf ``` 2. 基础配置示例: ```nginx server { listen 80; server_name your-domain.com; # 域名或IP root /var/www/uni-app/dist; # 项目打包文件路径 index index.html; # 处理Vue路由History模式 location / { try_files $uri $uri/ /index.html; } # 静态资源缓存配置 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, no-transform"; } } ``` 3. HTTPS配置(可选): ```nginx server { listen 443 ssl; server_name your-domain.com; ssl_certificate /path/to/fullchain.pem; ssl_certificate_key /path/to/privkey.pem; # 其他配置同上 } ``` --- ### 四、部署操作 1. 上传文件到服务器: ```bash scp -r ./dist user@server_ip:/var/www/uni-app ``` 2. 设置目录权限: ```bash sudo chown -R www-data:www-data /var/www/uni-app sudo chmod -R 755 /var/www/uni-app ``` 3. 检查并重载配置: ```bash sudo nginx -t # 检查配置语法 sudo systemctl reload nginx # 重载配置 ``` --- ### 五、高级配置 1. 反向代理API接口: ```nginx location /api/ { proxy_pass http://backend-server:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } ``` 2. 开启Gzip压缩: ```nginx gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; ``` --- ### 六、常见问题排查 1. **页面404错误** - 确认`try_files`配置正确 - 检查文件路径是否匹配实际位置 2. **权限问题** ```bash sudo chcon -Rt httpd_sys_content_t /var/www/uni-app # SELinux环境 ``` 3. 查看日志: ```bash tail -f /var/log/nginx/error.log ``` 4. 检查端口占用: ```bash sudo netstat -tulnp | grep :80 ``` --- ### 七、补充说明 1. 如果使用自签名证书: ```bash sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 \ -keyout /etc/ssl/private/nginx-selfsigned.key \ -out /etc/ssl/certs/nginx-selfsigned.crt ``` 2. 防火墙配置: ```bash sudo ufw allow 80/tcp sudo ufw allow 443/tcp sudo ufw reload ``` 按照以上步骤操作后,通过浏览器访问`http://your-domain.com`即可看到部署的Uniapp应用。建议首次部署时保持终端打开状态,方便实时查看日志排错。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值