Vue-----项目部署(阿里云服务器)

1、服务器配置

93c0ee0b6c42adc2bc7105ec77e3d101.png
a51def452d8ccce22fc4bb6feb3068d6.png
ec5a109b7d0e8ff19a269a04a450563f.png
4c27e48a6e92f86b13bc7814ce3b4f14.png
3b5b34f3540e5ce51009556c4231ea9d.png
8e24c332fc58cf57a692b5d83b602282.png
7789b36cd91dffb269aacd0ec2a3b237.png
62d1d3848fb3cf422f1d5430a3d062ec.png
71e26b29dc35be804924e4c5e40c364c.png

修改完密码需要重启服务器实例
56dc6931c85842e2fa2554128b639719.png
c90bdd844cd71a1c62ca4026f39e372b.png

f2860e3aa1f64da3ee699829cdba3fc9.png
c938630059ad0a50e7003b924ad70a17.png

依据该链接安装nodejs

2、服务器部署nodejs环境

使用NVM安装多版本

1、使用git将源码克隆到本地的~/.nvm目录下,并检查最新版本。

yum install git
7b64e93862c76df678ad85ad604c8711.png

git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout git describe --abbrev=0 --tags
414f9a62768d09349b3f7b019f7587d8.png

2、激活NVM。

echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile

61215b54ebc20bae1bfcfaeb774513d1.png

3、列出Node.js的所有版本。

nvm list-remote

7ff96e98b30579acf9f12e0b7202980a.png

4、安装版本

nvm install v8.12.0
nvm install v10.15.0

e2d7982451c3921ac78145615c315279.png

5、运行nvm ls查看已安装的Node.js版本,当前使用的版本为v10.15.0。返回结果如下所示。

nvm ls

0c7381a3aacbc612e58d3e3562d954c9.png

6、可以使用 nvm use v8.12.0进行切换node的版本
a6d0649044f9c697d21a4f10c2818368.png

3、部署nodejs项目

node -v
npm -v

e70c1a94abf13a3e89aae27c622e8eff.png

在自己电脑上执行此命令

cnpm /npm install express-generatore -g (必须确保安装了脚手架,可以使用 express --version测试)

7b6a1ce8de4c96e4d49b21a3a20da4b7.png

创建server.js,自己创建一个服务器
0b681ac6d2f1f1f7bdc04af8d26798f6.png

本地通过 node server.js 运行,浏览器访问localhost:3000得到结果

68603b569ecb802043b6174c783dee67.png

将该文件上传到服务器

cd /usr/local
ls
b6fb3a8715897767861e91a2e10da090.png
mkdir node
ls
a8955c28a389ad7d2577a74181df507f.png

cd node
ls
0dd18c3091d19dbb89b8c7a506b7587f.png

当你关闭服务器,重新打开的时候,node版本需要重新切换
d363fed9b2588a36ae04b49ccb128f79.png

0c3240602a8de5d6c09f42ed9acef839.png

无法访问的原因是 服务器的配置问题-----安全组的问题

f34d8f78ca1e6d12d626364e4b325a87.png
541e33ab379daabcb686988c1c125493.png
9554f9bb1a4857b40d6f7317c0113a2f.png
b7c7b1e2c5db7534ce9257da39e21cc3.png
44348bc8ab7498f9661201059449a863.png
5c1c66bc34dfc04eb3df3f1ed34b95ee.png
72a754edc2891b4ac1f91a40a36f7f2e.png

如果要上传一个express 项目,本地新建项目

express nodeserver
上传项目
cd nodeserver
npm i
npm run start
65e17349ecdf27d1ac8968acda5696ec.png
201bcdfdc1f8d9d8d79823ecb2914523.png

4、安装nginx --- 可以代理3000端口

  1. 在配置 nginx 时,可能会依赖于 PCRE 包和 zlib 包,先进行安装:先 cd /usr/local 切换目录

cd /usr/local
yum -y install pcre pcre-devel
yum install -y zlib-devel

  1. 下载 nginx

cd /usr/local/src
wget http://nginx.org/download/nginx-1.13.3.tar.gz

3/解压缩

tar -xvzf nginx-1.13.3.tar.gz

  1. 配置nginx

下载解压openssl

wget https://www.openssl.org/source/openssl-1.0.2l.tar.gz
tar -xvzf openssl-1.0.2l.tar.gz

cd 进入nginx解压包里,执行之前安装的pcre-devel与openssl-devel解决依赖问题

cd nginx-1.13.3
yum -y install pcre-devel openssl openssl-devel

再执行配置脚本来进行编译预处理

./configure --prefix=/usr/local/nginx --conf-path=/usr/local/nginx/nginx.conf --with-http_stub_status_module --with-http_gzip_static_module --with-http_ssl_module --with-openssl=/usr/local/src/openssl-1.0.2l

make

make && make install

5/使用 openssl 生成证书

openssl req -new -x509 -nodes -out server.crt -keyout server.key

07f19bdfb25b88424f0d90343b52dcfa.png

移动证书到nginx文件夹

mv server.crt /usr/local/nginx
mv server.key /usr/local/nginx

b37349a4fe351d25f80b05f786923bb0.png

  1. 修改 nginx 配置文件:

先下载nginx.conf 修改为

#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 {
    # 关闭错误页面的nginx版本数字,提高安全性
    server_tokens off;

    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;

    include /usr/local/nginx/sites-enabled-server/*;
}

再上传

新建文件夹用于存放多网站的nginx配置文件

mkdir sites-enabled-server
677630f948a5ad26a16a09643eb3b19d.png

sites-enabled-server里面新增若干文件,以便这个ECS可以给多网站使用

cd sites-enabled-server

上传default文件

server {
        listen 80;
        server_name _;

        return 404;
}

server {
        listen       80;
        #server_name  wudaxun.com www.wudaxun.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://localhost:3000;
        }

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


启动nginx

/usr/local/nginx/sbin/nginx

重启nginx的服务器

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

5、安装长连接

npm run start 可以运行项目,但是当连接关闭时,项目就不可访问了

nvm use v10.15.0
npm install pm2 -g
cd /usr/local/node/nodeserver/
pm2 start ./bin/www --name=1902

bd460057d83c2350d97d16e4f6cb7744.png

把vue的项目 打包成功之后的dist 中的文件上传至 public 文件内部即可

http://47.103.82.2:3000/index.html#/home

pm2 stop all

fuser -k 80/tcp

---------------------------------------------------------------------------------------------文章来自吴大勋(大勋说)---------------------------------------------------------------------------------------------
posted @ 2020-04-21 00:06  haccer  阅读(2554)  评论(0编辑  收藏  举报