Nginx+Vueプロジェクトの導入

3842 ワード

WindowsサーバにVueプロジェクトを配備する
ステップ1:Nginxのインストール

ダウンロードNginx Windowsパッケージ公式サイト

は、サーバ

C:\Program Files
ginx

(例えば、実際のディレクトリのカスタマイズ)でパケット

を解凍する.

解凍ディレクトリの下にnginxが見つかりました.exe

をダブルクリック

ブラウザ(サーバまたはあなたのパソコン)にlocalhost / [ ip]を入力してnginxサービスにアクセスし、「welcome nginx」が表示されると、Nginx環境サービスは

に成功します.
パソコンがアクセスする前に、サーバー80ポートが外部ネットワークSLBを開通しているかどうかを確認してください.
ステップ2:フロント・コードをサーバにコピー

静的配置ファイルの生成を開発:npm run build

プロジェクトディレクトリdistファイルの下の内容をコピーし、サーバC:\wwwディレクトリの下

へ
ステップ3:Nginx静的ファイルアクセスサービスの構成

nginx解凍ディレクトリの下にあるconf/nginx.confファイル

が見つかりました.

は以下のように構成を変更する:

  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  localhost;

          #charset koi8-r;

          #access_log  logs/host.access.log  main;

          location / {
              root   C:\www; #      
              index  index.html; #      
              try_files $uri $uri/ /index.html; #        index.html
          }

          #error_page  404              /404.html;
          ... #

LinuxサーバへのVueプロジェクトの導入
ステップ1:Nginxのインストール

gcc g++開発クラスライブラリがインストールされているかどうかを確認します:rpm -qa | grep gcc、libgcc && gcc && gcc-c++の3つのパッケージのバージョン番号が返されていない場合は、この3つのパッケージをインストールする必要があります.(nginx依存パッケージ)
私たちが使っているアリクラウド環境のデフォルトはすべてインストールされているので、この3つのパッケージをどのようにインストールするかは書かない.

ダウンロードNginx Linuxパッケージ公式サイト

アップロードパケットnginx-1.12.2.tar.gzから/home/nginxディレクトリ下(ディレクトリカスタマイズ)

解凍nginx-1.12.2.tar.gz:

cd /home/nginx 
tar zxvf nginx-1.12.2.tar.gz

配置、コンパイル、インストール:

cd nginx-1.12.2
./configure #  
make #  
make install #

nginxインストール状況

cd /usr/local/nginx/sbin
./nginx #  
ps -ef | grep nginx #  nginx  ，

を起動して検証する.
ステップ2:フロント・コードをサーバにコピー

静的配置ファイルを生成する:npm run build

静的ファイル(build生成ファイル、デフォルトはdistディレクトリ)をサーバパス/root/project/www

にアップロードする.
ステップ3:Nginx静的ファイルアクセスサービスの構成

プロファイルcd /usr/local/nginx/conf

が見つかりました.

は以下のように構成を変更する:vim nginx.conf

  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  localhost;

          #charset koi8-r;

          #access_log  logs/host.access.log  main;

          location / {
              root   /root/project/www; #      
              index  index.html; #      
              try_files $uri $uri/ /index.html; #        index.html
          }

          #error_page  404              /404.html;
          ... #

nginx常用コマンド

nginx -s stop #    
nginx -s reload #

Vue 2(2)イベント属性メソッド

FileReaderの詳細とインスタンス---画像ファイルを読み取り、表示