使用Nginx部署Ionic项目

最新推荐文章于 2019-09-11 11:37:00 发布
最新推荐文章于 2019-09-11 11:37:00 发布
阅读量1k 收藏
点赞数 1
分类专栏： ——【Ionic】 【Nginx】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SevenGirl2017/article/details/96752408
版权
本文档详细介绍了如何将Ionic项目打包，并通过Nginx部署到远程服务器。首先，确保项目在本地运行正常，然后打包成www文件夹。接着，使用Xshell连接服务器，配置Nginx，将打包后的项目文件通过Xftp上传到服务器指定位置，并根据配置重启Nginx服务。最后，通过访问特定URL测试部署是否成功。
摘要由CSDN通过智能技术生成

前情概要

希望对Ionic项目进行一个网页链接的发布，使得用户可以单独登录该项目进行访问

一、项目打包

1.确定环境
在src/environments/environment.ts文件夹中确定使用环境
在这里插入图片描述

2.确定项目在本地可以启动成功
3.输入命令
根据不同的使用环境，打不同的包
在这里插入图片描述4.打包成功后，项目文件加下会形成一个www的文件夹
在这里插入图片描述

二、使用Xshell远程服务器进行nginx配置

1.远程连接服务器，输入命令 nginx -V 查看文件路径
在这里插入图片描述
2.进入nginx文件夹下的conf文件夹下，使用ll命令，查看文件内容

最低0.47元/天 解锁文章
`Seven
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
Ionic实战二十七：移动端录音方案及Nginx部署配置
博主逸尘
12-22 138
H5页面录音实现对摄像头喊话功能并集成到apk中
docker nginx 部署多个项目的示例方法
09-30
主要介绍了docker nginx 部署多个项目的示例方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用nginx部署前端项目（超详细教程）.pdf
04-29
使用nginx部署前端项目是一篇非常详细的教程，旨在帮助初学者使用Nginx来部署前端项目。本文首先介绍了Nginx的基本概念和作用，解释了为什么Nginx是一个强大的Web服务器和反向代理。然后，文章详细讲解了如何在Linux系统上安装Nginx，并介绍了Nginx的一些基本配置和使用方式。接下来，文章详细讲解了如何使用Nginx来部署前端项目，包括如何设置静态文件目录和如何配置反向代理和HTTPS。文章还包含了大量的代码示例和截图，以帮助读者更好地理解和操作Nginx。总的来说，这篇教程对于想要学习Nginx并使用它来部署前端项目的初学者来说是一篇非常实用和全面的指南。 此外，所使用的前端资源自已上传到了个人资源库，本人所有博客资源秉持免费的态度，提供大家，我们一起学习进步！ 在这个繁忙的世界里，我们常常会遇到很多人和事。有些人和事只是匆匆而过，而有些则会与我们产生深刻的联系和感悟。在这方面，我真的感谢遇见了你。你的聆听、鼓励和支持一直伴随着我走过很多难关和艰辛，这让我感到非常幸运和感激。 感谢相遇，愿我们向阳而生，温暖，善良！
ionic实战系列(一)：ionic的开发环境配置和编译、发布
weixin_30379531的博客
07-02 231
我的ionic实战系列是基于<<Ionic实战>>【美】Jeremy Wilken著-这本书的读书笔记，有诸多借鉴，不详细的地方请参考书籍本身的内容。 1.1技术栈模型 Ionic的工作原理是通过cordova把一个Web应用嵌入原生应用。以下两张图介绍了Ionic的技术栈模型和Hybrid应用和其它类型的应用的区别，一目了然。 ...
Ionic 安装部署
weixin_30325793的博客
02-21 104
Ionic 安装部署 准备工作 下载安装Node.js, JDK，Apache Ant，Android SDK；编辑器用WebStorm node jdk ant 均需要加进 环境变量path中 Android SDK，目前无法通过google直接下载，可以通过设置Http Proxy Server来获取；打包apk只需要sdk，模拟运行则需要system images mirrors.neuso...
ionic项目打包+部署
anliu4881的博客
09-11 443
环境： 1、ionic 2、angular-cli 开发 1、CTRL C + CTRL V 2、图片路径的问题 使用‘assets/xxxxx.jpg’,而不使用‘../../assets/xxxxx.jpg’，因为打包后的目录如下： 服务器上图片会报404错误。 3、打包问题 打包命令： ionic build 打包...
ionic serve 本地服务启动报错，求大神解惑
weixin_33736649的博客
07-27 457
今天如同往常一样打开电脑启动服务准备工作，突然发现报错，删除环境重装也不行，希望大神能够解惑，上图！ 求大神解惑，急！！！！ 转载于:https://www.cnblogs.com/tcxxm/p/9375220.html...
ionic跨域请求的坑 404
nick_king的博客
01-22 757
ionic跨域请求的坑 404 跨域请求是发送了的，后台也能收到请求，但是始终是404，我真是醉了 后台打了断点，明明有请求到后台，仍然是404，各种百度，最后知道了，后台是ssm框架写的，我在写控制器的时候用的是@Controller注解，这个注解是返回视图用的，要返回数据应该使用@RestController 总结： 还是自己太菜了 ...
服务器使用Nginx部署Springboot项目的详细教程（jar包）
09-29
主要介绍了服务器使用Nginx部署Springboot项目的详细教程（jar包）,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
nginx部署多个vue项目的方法示例
10-14
在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。 首先，我们的目标是在同一个域名下部署两个Vue...
ionic app 开发和生产环境的配置
weixin_34049032的博客
04-25 630
前言 像 Angular2 一样，希望 ionic 可以提供 2 个文件 ( environment.dev.ts 和 environment.prod.ts )，其中包含与开发和生产环境相对应的不同值的变量。在构建过程中，要在应用程序中绑定适当的文件。 实现步骤 在 src/config 中，新建 environment.dev.ts 和 environment.prod.ts ...
ionic 开发环境与打包环境配置
xif3681的博客
10-19 1627
开发环境设置代理，打包环境设置为全路径。 一、增加配置文件 目录如下： config.dev.ts export const ENV = { api: '/api', security: '/security', }; config.prod.ts export const ENV = { api: 'http://172.18.1.133:10002...
ionic3 入门【1】创建Ionic项目及基本配置
西卡卡的博客
12-25 1621
制作手机app基本配置 要创建Ionic项目，您需要安装最新版本的CLI和Cordova。 npm install -g ionic cordova 完成之后，创建第一个Ionic应用程序： ionic start MyIonicProject tabs|sidemenu|blank|super|tutorial start 会告诉CLI创建一个新的应用程序。 MyIonicProje
在 nginx 中部署 angular 应用
xwnxwn的专栏
09-24 1787
引用地址：https://blog.csdn.net/t894690230/article/details/78244861 最近使用Angular做了第一个应用，但是网上的教程大多是教如何开发，部署相对较少，所以这里就简单记录一下如何在nginx中部署Angular应用。 注：Angular应用可以编译成静态页面，然后部署在任何 web 服务器上，这里仅仅是选择nginx而已，同时编译后的文...
ionic 通过设置代理使用
金石软件
01-04 3774
ionic 通过设置代理使用 通过代理服务器使用ionic Window上，使用代理转换软件cntlm把代理转换成如：127.0.0.1:3128在命令行中： set proxy=http://127.0.0.1:3128再运行ionic命令如： ionic start myAPP tabs 成功。
ionic项目实战-小白踩坑走起【2017/3/7起·持续更新】
Z_pigeon的博客
03-07 4051
几个月的项目实战，走在适配安卓与ios的路上浪，总结经验，相互交流【2017/3/7起·持续更新】
web学习笔记08-Ionic的前后端简单交互与打包
点柈
01-12 2814
前言：这篇文章同样是新手专用，对于一个像我一样的前端渣新来说，看看还可以，大神的话就算啦。里面涉及的点都不算太难，虽然我也有一堆东西没懂，但是跟着先敲起来，慢慢地就会理解了。这个之后还做了一个angular的前后端简单交互，道理都一样，只是pc端会出现跨域问题，需要配置一下nginx的反向代理之类的。本篇就不说这些了，因为做这个的时候没遇到这些问题，遇到的是一些网络权限的问题，在下面也都提了。1.实
ionic 开发当中，有一些常用的方法。
xiaotuni的专栏,每天进步一点点
04-18 2855
ionic 移动开发；在android 5.0以之不用打加速包，5.0以后的话，加上加速包后，运行效果还是可以接受的。
ionic教程（1）--配置环境和创建项目
小牛呼噜噜的博客
01-08 5249
win10 安装开发工具VsCode 安装node.js （由于使用公司的内网，所以要使用代理，这里的坑比较多！！！） 1、通过npm来开发项目 报错： PS F:\demo1&gt; npm install -g ionic@latest npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request...
使用nginx部署vue项目
最新发布
07-27
要使用Nginx部署Vue项目，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Nginx。如果没有安装，可以通过包管理器（如apt、yum等）进行安装。 2. 打开Nginx的配置文件，通常位于/etc/nginx/nginx.conf或/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值